Experiments

01

Drawer

Painel lateral deslizante. 1/3 da viewport, overlay 40%, ease-in/out Material.

Ver componente →

02

Toast

Notificação contextual com auto-dismiss, progress bar e 3 variantes (info, sucesso, erro).

Ver componente →

03

Tooltip

Floating label com smart positioning automático nas 4 direções e delay de entrada.

Ver componente →

04

Magnetic Button

Botão que reage à posição do cursor com translação suave. Visto em Stripe, Linear, Resend.

Ver componente →

05

Text Scramble

Texto que se revela com efeito glitch/decode ao entrar na viewport. Muito usado em portfolios tech.

Ver componente →

06

Tabs

Abas com indicador que desliza suavemente entre os itens. Útil para navegação em cases.

Ver componente →

07

Accordion

Expand/collapse com transição de altura fluida e chevron animado. FAQ, process steps.

Ver componente →

08

Filter Chips

Tags toggle com estado selecionado e animação de entrada. Filtros na work page.

Ver componente →

09

Bento Grid

Layout assimétrico estilo Apple/Linear para exibir stats, skills ou destaques do portfólio.

Ver componente →

10

Marquee

Scroll horizontal contínuo e infinito. Ideal para exibir ferramentas, empresas ou skills sem poluir o layout.

Ver componente →

11

Stagger Reveal

Itens entram em cascata com delay progressivo ao scrollar. Substitui o reveal atual do site.

Ver componente →

12

Image Reveal

Hover sobre o nome do case revela uma imagem flutuante. Visto em portfolios de alto impacto.

Ver componente →

13

Custom Cursor

Dot + ring com lag suave. 4 estados: default, link, texto, click. Blend mode opcional.

Ver componente →

14

Number Counter

Animação 0→N com easeOutCubic ao entrar na viewport. Stats do portfólio com mais impacto.

Ver componente →

15

Tilt Card

Perspectiva 3D no hover com glare radial e conteúdo levitado. Aplicável nos cards de case.

Ver componente →

16

Scroll Progress

Barra de leitura no topo + indicador lateral de seção. Diretamente aplicável em cases.

Ver componente →

17

Case Navigation

Menu lateral com âncoras e destaque por seção. Padrão para todas as páginas de case study.

Ver componente →

18

Depth Parallax

3 camadas sobrepostas com tilt 3D pelo mouse e foco que migra do fundo à frente pelo scroll.

Ver componente →

19

Single Column

Layout A — coluna única sem sidenav. Referência visual e rollback para cases com menos conteúdo.

Ver referência →