Showcase

Fontes & Animações

Explore 18 estilos tipográficos diferentes com animações CSS puras, cada um com personalidade e aplicação específica para projetos web.

DRAW PATH
FluxxyCode
Identidade da Marca SANS
Heading: Outfit 800
Body: Outfit 400–600
CURSOR
DEV.
Space Grotesk + DM Sans
Tech Startup SANS
Heading: Space Grotesk 700
Body: DM Sans 400
TYPEWRITER
FLUXXY
Bebas Neue + Source Sans 3
Bold Statement DISPLAY
Heading: Bebas Neue
Body: Source Sans 3 400
LINE REVEAL
1  const build = async () => { 2    await deploy('prod'); 3    return 200; 4  } 5  build();
Developer Mono MONO
Code: JetBrains Mono 400
UI: IBM Plex Sans 500
GLOW PULSE
Élégance
Cormorant + Montserrat
Luxury Serif SERIF
Heading: Cormorant Italic 700
Body: Montserrat 300
FADE IN
FluxxyCode — 2026
Modern
Editorial
Clean type. Sharp ideas. Digital precision.
Editorial Classic SERIF
Heading: Playfair Display 900
Body: Inter 400
NEON PULSE
BLOCKCHAIN
Orbitron + Exo 2
Crypto / Web3 DISPLAY
Heading: Orbitron 700
Body: Exo 2 400
PIXEL
FLUXXY
PRESS START 2P
Pixel Retro / 8-bit MONO
Display: Press Start 2P
Body: VT323 regular
SYS.PERFORMANCE
97.3%
HUD / Sci-fi FUI MONO
Display: Share Tech Mono
Scanline + scan animation
SLIDE + SKEW
AVANT
Syne × Manrope
Fashion Forward SANS
Heading: Syne 700
Body: Manrope 300
LETTER WAVE
F L U X X Y
Kinetic Typography
Kinetic / Wave Letters ANIMADO
Font: Outfit 900
Effect: stagger wave loop
NEON PULSE
GAME ON
Chakra Petch UI
Gaming Bold GAME
Heading: Russo One
Body: Chakra Petch 400
BOUNCE
SOUND
Righteous + Poppins
Music & Entertainment DISPLAY
Heading: Righteous
Body: Poppins 500
LETTER SPACING
SPEED
Syncopate × Space Mono
Kinetic Motion ANIMADO
Heading: Syncopate 700
Body: Space Mono 400
DATA VIZ
Desempenho
React
92%
Node.js
74%
MongoDB
83%
DevOps
61%
Dashboard Data MONO
UI: IBM Plex Sans 600
Data: IBM Plex Mono
GLASS CARD
Performance
Glassmorphism UI
Saiba mais →
Glassmorphism SANS
Font: Outfit 700 + Inter
Effect: backdrop-filter blur
NEU BRUTALISM
BOLD
TYPE
Hard Shadows
CLICK
Neubrutalism DISPLAY
Font: Outfit 900
Effect: hard box-shadow offset
GRADIENT SHIFT
INFINITE
Montserrat + CSS Gradient
Gradient Text ANIMADO
Font: Montserrat 900
Effect: background-clip gradient shift
Guia de Tipografia

Combinações recomendadas
por categoria de projeto

Agency
Clean professional body copy for maximum readability.
OUTFIT + INTER
Agências & Startups
Combinação geométrica moderna. Outfit dá personalidade nos títulos e Inter garante legibilidade no corpo.
SaaSAgênciaPortfolio
0x4F
Technical precision meets usability.
SPACE GROTESK + DM SANS
Produtos Tech
Caráter técnico com Space Grotesk nos títulos e alta legibilidade do DM Sans no corpo. Perfeito para dev tools.
Dev ToolsWeb3AI
Editorial
Long-form content with elegance.
PLAYFAIR DISPLAY + INTER
Editorial & Blog
Contraste clássico entre a elegância serifada nos títulos e a clareza da Inter no texto longo. Autoridade editorial.
BlogRevistaNotícias
$ build
Developer-first interface design.
JETBRAINS MONO + IBM PLEX
Ferramentas de Dev
JetBrains Mono para blocos de código com IBM Plex Sans na UI. Precisão técnica com legibilidade profissional.
CLIDocsIDE
Luxe
Premium experience.
CORMORANT + MONTSERRAT
Marcas Premium
Elegância da Cormorant nos títulos com a precisão geométrica da Montserrat. Ideal para marcas de alto padrão.
LuxoModaPremium
NEXUS
Blockchain future interface.
ORBITRON + EXO 2
Crypto / Web3 / Futurista
Orbitron comunica tecnologia futurista nos headers. Exo 2 mantém legibilidade no corpo com caráter technical.
CryptoNFTSci-Fi

Gostou do que viu?
Vamos criar juntos.

Temos o estilo certo para o seu projeto. Fale com a equipe e receba uma proposta personalizada.

Iniciar projeto ← Voltar ao início
Componentes UI

Menus, Loaders
e Interfaces

Componentes CSS/JS usados em projetos reais — clique e interaja.

Home Serviços Portfólio Contato
Web Design
E-commerce
Landing Page
SEO Técnico
Sistemas Web
UI/UX
Dropdown Menu MENU

Navegação com submenu animado, suporte a hover e foco — acessível e flúido.

Dashboard
Projetos
Analytics
Clientes
Config
Sidebar Nav MENU

Painel lateral com estado ativo, ícones e destaque visual para apps e dashboards.

CLIQUE PARA ABRIR
Hamburger → X ANIMAÇÃO

Botão hamburger que transforma em “X” com CSS puro — nenhum JS necessário para o estilo.

Skeleton Loader LOADER

Placeholder animado com shimmer — melhor experiência durante carregamento de conteúdo.

Projeto publicado com sucesso!
×
Backup pendente há 3 dias.
×
Erro ao enviar e-mail.
×
Toast Notification UI

Notificações empilhadas com slide-in animado — sucesso, aviso e erro com cores distintas.

Confirmar ação
Deseja publicar as alterações? Essa ação não pode ser desfeita.
Modal Dialog UI

Diálogo modal com backdrop blur, botões de ação e foco acessível — pronto para interação.

CSS Avançado92%
JavaScript85%
React / Next78%
Node.js70%
Progress Bars ANIMAÇÃO

Barras de progresso animadas com gradiente colorido — ideais para seções de habilidades.

Frente FluxxyCode
Verso UI/UX
3D Flip Card ANIMAÇÃO

Card com rotação 3D em CSS puro usando perspective e rotateY.

Borda animada CSS Magic
Animated Border ANIMAÇÃO

Borda com gradiente em loop animado — efeito premium em CSS puro, sem JS.