Retro Gaming UI

Design system inspirado em videogames clássicos.

Music Player

BGM lo-fi

Loops originais, lentos — play, seek, volume, shuffle e repeat. Widget abaixo é a versão inline; o mesmo player flutua no canto da tela.

Midnight Rain

00:00 / 00:00

Combat Skills

Plasma Mastery60%
Combat Reflexes0%
Overcharge0%

Tech Skills

Cyber Defense40%
Energy Efficiency33%
Neural Link0%

Survival Skills

Survival Instinct100%

Skill Details

Combat skill

Plasma Mastery

Increases plasma weapon damage by 15% per level.

Current level3

Max level5

StatusUnlocked

Secondary

Borda e título roxos

Accent

Borda e título rosa

Warning

Borda e título amarelos

Glow

Primary + halo neon

Typography

Press Start 2P + Orbitron

Heading 124px
Heading 220px
Heading 318px
Body16px
Small14px
Caption12px

Press Start 2P

Colors

Paleta neon

Primary
Secondary
Accent
Danger
Warning
Success

Action Buttons

Cantos pixelados, sobem no hover, afundam no click

Button Sizes

sm / md / lg / icon

Terminal Input

Form controls

6 dígitos recebidos via WhatsApp

Servidor indisponível

System Status

Barras de progresso

Health85%
Mana60%
EXP92%
Energy40%

Typing

Digita, espera e reescreve — máscara CSS, texto completo no DOM

> system initialized> loading assets... [ok]> ready for input

Text Effects

Glitch, neon sign e pulse

GAME OVERINSERT COINPOWER UP

Loading

Rotação em passos discretos

Carregando dados
Carregando mundo
Download35%

Icons

pixelarticons — conjunto free (24px)

  • gamepad
  • joystick
  • heart
  • zap
  • trophy
  • skull
  • sword
  • alien
  • robot-face
  • terminal
  • power
  • play

Cursor

Pixel art + rastro animado

Seta pixelada por padrão, mão neon sobre elementos interativos e cursor nativo dentro de campos de texto. Sobre cada variante de botão, mão e quadrado trocam de token p/ contrastar com o fill.

Em telas de toque e com redução de movimento ativa, o rastro é desligado e o cursor do sistema volta.

Retro Slider

Tech Stack

Marquee infinito — hover pausa · ◀ ▶ invertem direção

Tecnologias: React, Next.js, TypeScript, Node.js, Docker, PostgreSQL, Git, Tailwind, Shell / CLI, CSS, REST / API

Sem controles

controls={false} — só hover pausa

Tecnologias: React, Next.js, TypeScript, Node.js, Docker, PostgreSQL

Velocidade lenta

duration={60} — 60s por loop

Tecnologias: React, Next.js, TypeScript, Node.js, Docker, PostgreSQL, Git, Tailwind, Shell / CLI, CSS, REST / API

Profile

▸ P1
ONLINE

Carlos Augusto

Sr. Frontend Engineer

São Paulo, BR

Constrói interfaces que parecem jogos e funcionam como ciência. Obcecado por DX, acessibilidade e pixels perfeitos.

STATS ──────────

React90%
TypeScript80%
CSS / Design85%
Node.js65%
  • React
  • Next.js
  • TypeScript
  • Tailwind
  • Node.js
▸ P1
BUSY

P. Zero

Pixel Artist · Game Dev

Internet

Ausência de avatar? Sem problema. O componente renderiza as iniciais com neon glow.

  • GameMaker
  • Aseprite
  • LÖVE2D

Retro Timeline

Quest Log

work · edu · project · achievement

  1. 2024
    Sr. Frontend EngineerNOW

    Acme Corp

    Liderou migração de SPA legada para Next.js App Router, reduzindo TTI em 42%.

    • Next.js
    • TypeScript
    • Tailwind
  2. 2022
    Frontend Engineer

    Startup XYZ

    Design system do zero, adotado em 3 produtos internos.

    • React
    • Figma
    • Storybook
  3. 2020
    Ciência da Computação

    Universidade Federal

    TCC sobre acessibilidade em interfaces web.

    • Python
    • Pesquisa
  4. 2019
    Retro UI Library

    Lib open-source de componentes retro para React. +800 stars.

    • React
    • Open Source
    • CSS
  5. 2018
    Hackathon Champion

    DevFest SP

    1º lugar em UX Innovation.

Só Projects

Subconjunto filtrado manualmente

  1. 2019
    Retro UI Library

    Lib open-source de componentes retro para React. +800 stars.

    • React
    • Open Source
    • CSS
  2. 2018
    Hackathon Champion

    DevFest SP

    1º lugar em UX Innovation.

Midnight Rain

00:00 / 00:00