# creative-reference

> creative-reference

- Author: Sebastião Lustosa Frota Júnior
- Repository: sebastiaolustosagit/vanessa-hair-bio
- Version: 20260209202102
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-09
- Source: https://github.com/sebastiaolustosagit/vanessa-hair-bio
- Web: https://mule.run/skillshub/@@sebastiaolustosagit/vanessa-hair-bio~creative-reference:20260209202102

---

---
description: creative-reference
---

# Referencia Criativa Extensiva

Este arquivo contem TODAS as possibilidades de layout, composicao, movimento e interacao da web moderna. Use como catalogo para variar seus designs.

---

## ARQUÉTIPOS DE COMPOSICAO

### Baseados em Grid
- Grid Simetrico → Colunas iguais, ordem visual clara
- Grid Assimetrico → Colunas de tamanhos diferentes, tensao visual
- Masonry → Alturas variadas como Pinterest, densidade organica
- Bento Box → Celulas de tamanhos variados como caixa de bento japones
- Modular → Modulos que se repetem com variacoes
- Broken Grid → Elementos que intencionalmente quebram a grade
- Overlapping Grid → Elementos que transbordam suas celulas
- Responsive Columns → Colunas que mudam dramaticamente entre breakpoints
- Golden Ratio → Proporcoes auricas, equilibrio natural
- Rule of Thirds → Composicao fotografica aplicada a layout

### Baseados em Divisao
- Split Vertical → Divisao 50/50 lado a lado
- Split Horizontal → Divisao topo/base
- Split Diagonal → Divisao em angulo
- Split Assimetrico → Divisao 70/30 ou 60/40
- Split com Overlap → Divisao onde conteudos se cruzam
- Multi-Split → Mais de 2 divisoes
- Split Animado → Divisao que muda com scroll/interacao
- Split Revelador → Uma parte revela a outra

### Baseados em Camadas
- Layered → Elementos empilhados em Z com profundidade
- Glassmorphism → Camadas translucidas com blur
- Card Stack → Cards empilhados como baralho
- Parallax Layers → Camadas que movem em velocidades diferentes
- Depth Blur → Camadas com desfoque progressivo
- Shadow Depth → Sombras que criam ilusao de profundidade
- Floating Cards → Elementos que parecem flutuar sobre fundo
- Nested Frames → Molduras dentro de molduras

### Baseados em Fluxo
- Scroll Cinematico → Scroll como timeline de filme
- Scroll Horizontal → Movimento lateral ao inves de vertical
- Scroll Snap → Secoes que "travam" na tela
- Infinite Scroll → Conteudo que parece nao ter fim
- Scroll Storytelling → Narrativa que se desenrola com scroll
- Scroll Triggered → Eventos que acontecem em pontos do scroll
- Scroll Hijacking → Scroll controlado com animacoes
- Locomotive Scroll → Scroll suavizado com inertia

### Baseados em Foco
- Hero Dominante → Hero ocupa 100vh, resto e secundario
- Single Focus → Uma unica coisa por secao
- Spotlight → Elemento central com tudo ao redor escurecido
- Progressive Reveal → Foco muda conforme scroll
- Zoom Focus → Elemento que amplia ao receber foco
- Isolated Element → Elemento sozinho com muito espaco negativo
- Framed Content → Conteudo enquadrado por elementos decorativos
- Contained Center → Container central com margens generosas

### Baseados em Movimento
- Kinetic → Elementos em movimento constante
- Reactive → Elementos que reagem a acoes do usuario
- Ambient Motion → Movimento sutil de fundo sempre presente
- Rhythmic → Movimento com ritmo/padrao definido
- Organic Flow → Movimento que imita natureza (agua, vento)
- Mechanical → Movimento preciso, como maquina
- Chaotic → Movimento aleatorio controlado
- Breathing → Elementos que "respiram" (expand/contract)

### Baseados em Tipografia
- Type Hero → Tipografia como elemento principal do hero
- Editorial → Layout de revista com colunas e tipografia elaborada
- Poster → Layout de cartaz, tipografia dramatica
- Kinetic Type → Tipografia animada como protagonista
- Variable Type → Fonte variavel que muda com interacao
- Type as Image → Texto tratado como elemento visual/arte
- Mixed Type → Multiplas fontes em contraste
- Monospace Editorial → Tipografia monoespacada como design

### Baseados em Midia
- Photo Essay → Sequencia de fotos conta historia
- Video Immersive → Video como fundo ou protagonista
- Gallery Wall → Multiplas imagens como galeria de arte
- Lookbook → Estilo de catalogo de moda
- Documentary → Midia com legendas/contexto jornalistico
- Collage → Multiplas midias sobrepostas
- Before/After → Comparacao visual de estados
- Case Study → Midia mostrando processo/resultado

### Baseados em Interacao
- Cursor Playground → Cursor e parte da experiencia
- Drag Interface → Elementos arrastaveis
- Reveal on Demand → Conteudo aparece com interacao
- Gamified → Elementos de jogo na interface
- Conversational → Interface como dialogo
- Explorable → Usuario explora livremente
- Quiz/Assessment → Interacao que gera resultado
- Configurator → Usuario customiza algo visualmente

### Baseados em Densidade
- Minimal → Pouquissimos elementos, maximo respiro
- Sparse → Elementos bem espacados
- Balanced → Equilibrio entre cheio e vazio
- Dense → Muita informacao organizada
- Maximalist → Tudo, camadas, texturas, cores
- Data Dense → Dashboard, muitos dados visiveis
- White Space Hero → Espaco vazio como protagonista
- Horror Vacui → Medo do vazio, tudo preenchido

---

## CONSTRAINTS CRIATIVOS

### Midia
- Imagem Fullbleed → Imagem sangra todas as margens
- Imagem Recortada → Clip-path ou mask na imagem
- Imagem Duotone → Duas cores aplicadas na imagem
- Imagem Granulada → Grain/noise adicionado
- Imagem Saturada → Cores super vibrantes
- Imagem Dessaturada → Preto e branco ou baixa saturacao
- Imagem com Overlay → Camada de cor sobre imagem
- Imagem com Gradiente → Gradiente sobre imagem
- Imagem Blur Background → Imagem desfocada como fundo
- Imagem Parallax → Imagem move diferente do conteudo
- Video Loop → Video em loop como fundo
- Video Silenciado → Video como elemento visual sem audio
- Video Masked → Video dentro de forma/texto
- Video Picture-in-Picture → Video pequeno flutuante
- Lottie Animation → Animacao vetorial como elemento
- SVG Ilustracao → Graficos vetoriais customizados
- 3D Element → Elemento 3D renderizado (three.js)
- Particle System → Sistema de particulas animadas
- Canvas Background → Background gerado com canvas
- WebGL Scene → Cena 3D completa
- Generative Art → Arte gerada por algoritmo
- ASCII Art → Arte feita com caracteres

### Tipografia
- Headline >150px → Texto gigantesco em desktop
- Headline Full Width → Texto ocupa toda a largura
- Texto em Path → Texto segue curva ou forma
- Texto Circular → Texto em circulo
- Texto Ondulado → Texto com wave
- Texto Vertical → Orientacao vertical
- Texto Rotacionado → Texto em angulo
- Texto Recortado → Texto com clip-path
- Texto com Imagem → Imagem visivel atraves do texto
- Texto com Gradiente → Gradiente aplicado ao texto
- Texto com Stroke → Apenas contorno, sem fill
- Texto com Sombra Colorida → Sombra vibrante
- Texto Glitch → Efeito de erro digital
- Texto Blur → Texto com desfoque
- Texto Revelar → Texto aparece letra por letra
- Texto Scramble → Letras embaralham antes de formar
- Texto Typewriter → Efeito maquina de escrever
- Texto Split → Letras se separam/juntam
- Texto 3D → Perspectiva tridimensional
- Texto Neon → Efeito de letreiro neon
- Texto Outline → Multiplos contornos
- Texto Variable → Fonte variavel animada
- Mixed Weights → Pesos extremos combinados (100+900)
- Mixed Fonts → Serif + Sans combinados
- Lettering Custom → Tipografia desenhada para o projeto

### Layout
- Bleed Left → Elemento sangra margem esquerda
- Bleed Right → Elemento sangra margem direita
- Bleed Both → Elemento sangra ambas margens
- Bleed Top → Elemento sangra topo
- Overlap Elements → Elementos se sobrepoem
- Negative Margin → Margens negativas puxam elementos
- Absolute Positioning → Elementos posicionados absolutamente
- Fixed Element → Elemento fixo na tela
- Sticky Element → Elemento gruda durante scroll
- Off-Grid Element → Elemento fora do grid
- Rotated Container → Container rotacionado
- Skewed Section → Secao inclinada
- Curved Section → Secao com bordas curvas
- Diagonal Divider → Divisor diagonal entre secoes
- Wave Divider → Divisor ondulado
- Clip-path Section → Secao com forma recortada
- Full Height → Secao 100vh
- Beyond Viewport → Elemento maior que viewport
- Scroll Horizontal → Secao com scroll lateral
- Overflow Visible → Conteudo vaza container
- Container Narrow → Container muito estreito centralizado
- Container Wide → Container quase fullwidth
- Asymmetric Padding → Padding diferentes em cada lado
- No Padding → Zero padding, edge to edge

### Cor
- Monocromatico → Uma cor em varios tons
- Duocromatico → Apenas duas cores
- Gradiente Linear → Gradiente em linha
- Gradiente Radial → Gradiente circular
- Gradiente Conico → Gradiente em cone
- Gradiente Mesh → Gradiente com multiplos pontos
- Gradiente Animado → Gradiente que muda
- Dark Mode → Fundo escuro, texto claro
- Light Mode → Fundo claro, texto escuro
- High Contrast → Contraste extremo
- Low Contrast → Contraste sutil
- Neon Colors → Cores vibrantes neon
- Pastel Colors → Cores suaves pastel
- Earth Tones → Tons terrosos
- Jewel Tones → Cores de joias
- Color Blocking → Blocos de cor solida
- Color Overlay → Camada de cor sobre tudo
- Selective Color → Uma cor destaca, resto neutro
- Inverted Colors → Cores invertidas
- Transparent Background → Fundo transparente/blur

### Movimento
- Fade In → Aparece suavemente
- Fade Up → Aparece subindo
- Fade Down → Aparece descendo
- Fade Left → Aparece da direita
- Fade Right → Aparece da esquerda
- Scale In → Aparece crescendo
- Scale Out → Aparece diminuindo
- Rotate In → Aparece girando
- Flip In → Aparece virando
- Slide In → Desliza para posicao
- Bounce → Movimento com quique
- Elastic → Movimento elastico
- Spring → Movimento de mola
- Float Loop → Flutua infinitamente
- Rotate Loop → Gira infinitamente
- Pulse Loop → Pulsa infinitamente
- Breathe Loop → Respira infinitamente
- Shake → Treme
- Wobble → Balanca
- Swing → Balanca como pendulo
- Rubber Band → Estica e volta
- Morph Shape → Forma transforma em outra
- Path Animation → Elemento segue path
- Stagger → Elementos animam em sequencia
- Wave Stagger → Sequencia ondulada
- Random Delay → Delays aleatorios
- Scroll Speed → Velocidade varia com scroll
- Scroll Progress → Animacao baseada em % scroll
- View Timeline → Animacao CSS nativa com scroll
- Counter Animation → Numeros contando
- Text Reveal → Texto revelado progressivamente
- Draw SVG → SVG desenhado
- Clip Reveal → Conteudo revelado com clip-path
- Mask Reveal → Conteudo revelado com mask

### Interacao
- Hover Scale → Cresce no hover
- Hover Lift → Levanta no hover
- Hover Glow → Brilha no hover
- Hover Color → Muda cor no hover
- Hover Reveal → Revela conteudo no hover
- Hover Flip → Vira no hover
- Hover Slide → Desliza no hover
- Hover Underline → Sublinhado animado
- Hover Fill → Preenchimento animado
- Cursor Custom → Cursor personalizado
- Cursor Trail → Rastro do cursor
- Cursor Magnetic → Elementos atraidos pelo cursor
- Cursor Repel → Elementos fogem do cursor
- Mouse Parallax → Elementos movem com mouse
- Mouse Tilt → Inclinacao 3D com mouse
- Mouse Spotlight → Luz segue mouse
- Click Ripple → Onda ao clicar
- Click Confetti → Confete ao clicar
- Click Sound → Som ao clicar
- Drag Horizontal → Arrastar lateral
- Drag Vertical → Arrastar vertical
- Drag Free → Arrastar livre
- Pinch Zoom → Zoom com pinch
- Long Press → Acao ao segurar
- Double Tap → Acao ao tocar 2x
- Swipe Gesture → Acao ao deslizar
- Scroll Snap → Scroll para em pontos
- Pull to Refresh → Puxar para atualizar
- Infinite Load → Carregar mais ao chegar ao fim

### Efeitos Especiais
- Glassmorphism → Vidro fosco
- Neumorphism → Relevos suaves
- Claymorphism → Estilo argila 3D
- Noise Texture → Textura granulada
- Grain Overlay → Camada de grain
- Scanlines → Linhas de TV antiga
- Glitch Effect → Erro digital
- VHS Effect → Efeito fita VHS
- CRT Effect → Efeito monitor CRT
- Halftone → Reticulado de pontos
- Duotone → Duas cores mapeadas
- Color Separation → Separacao RGB
- Chromatic Aberration → Aberracao cromatica
- Motion Blur → Desfoque de movimento
- Depth of Field → Profundidade de campo
- Lens Flare → Reflexo de lente
- Light Leak → Vazamento de luz
- Bokeh → Desfoque circular
- Vignette → Escurecimento nas bordas
- Film Grain → Granulado de filme
- Poster Effect → Reducao de cores
- Pixelate → Pixelizacao
- ASCII Filter → Conversao para ASCII

### Estruturas Especiais
- Carousel Standard → Carrossel tradicional
- Carousel 3D → Carrossel com perspectiva
- Carousel Coverflow → Estilo iTunes
- Carousel Infinite → Loop infinito
- Carousel Vertical → Carrossel vertical
- Slider Before/After → Comparador arrastar
- Tabs → Abas de navegacao
- Accordion → Expansao/colapso
- Modal → Janela sobreposta
- Drawer → Painel deslizante
- Tooltip → Dica flutuante
- Popover → Balao informativo
- Toast → Notificacao temporaria
- Lightbox → Visualizador de midia
- Mega Menu → Menu expandido grande
- Sidebar → Barra lateral
- Sticky Header → Cabecalho fixo
- Floating Button → Botao flutuante (FAB)
- Progress Bar → Barra de progresso
- Loading Skeleton → Placeholder de carregamento
- Masonry Gallery → Galeria masonry
- Justified Gallery → Galeria justificada
- Metro Tiles → Tiles estilo Metro
- Timeline → Linha do tempo
- Kanban → Colunas arrastáveis
- Tree View → Visualizacao em arvore
- Org Chart → Organograma
- Flow Chart → Fluxograma
- Mind Map → Mapa mental
- Data Table → Tabela de dados
- Dashboard → Painel de controle
- Calendar → Calendario
- Map → Mapa interativo
- Chart → Grafico de dados
- Form Wizard → Formulario em etapas
- Pricing Table → Tabela de precos
- Feature Comparison → Comparacao de recursos
- Testimonial Slider → Carrossel de depoimentos
- Team Grid → Grid de equipe
- Portfolio Grid → Grid de portfolio
- Blog Grid → Grid de artigos
- Product Grid → Grid de produtos

---

## FONT PAIRINGS CURADOS

### Serif Heading + Sans Body (Editorial/Clássico)
- Playfair Display + Source Sans Pro → Elegante editorial
- Libre Caslon Display + Libre Franklin → Jornalístico moderno
- Libre Caslon Display + Libre Caslon Text → Clássico refinado
- Libertinus Serif + Libertinus Sans → Acadêmico sofisticado
- PT Serif + PT Sans → Russo neutro
- Crimson Pro + Crimson Text → Literário tradicional
- Crimson Text + Crimson Pro → Literário invertido
- Merriweather + Merriweather Sans → Leitura longa
- Source Serif 4 + Source Sans Pro → Adobe clean
- IBM Plex Serif + IBM Plex Sans → Corporativo tech
- Roboto Serif + Roboto → Material moderno
- Roboto Slab + Roboto → Slab tech
- Bespoke Serif + Bespoke Sans → Premium artesanal
- Bespoke Slab + Bespoke Sans → Slab artesanal
- General Serif + General Sans → Contemporâneo
- DM Serif Display + DM Sans → Alto contraste
- DM Serif Text + DM Sans → Display elegante
- DM Serif Display + DM Serif Text → Serif duo
- News Cycle + Newsreader → News editorial
- Domine + Manrope → Tradicional + moderno
- Aleo + Albert Sans → Friendly editorial
- Aleo + Archivo → Jornalístico forte
- Fraunces + Outfit → Vintage moderno
- Lora + Varela → Suave e legível
- Zilla Slab + Nunito Sans → Mozilla style
- Arvo + Montserrat → Bold clássico
- Arvo + Geist → Slab contemporâneo
- Alegreya + Alegreya Sans → Humanista coordenado
- Newsreader + Inter → Editorial digital
- Quattrocento + Quattrocento Sans → Renascentista
- Josefin Slab + Josefin Sans → Geométrico elegante
- Noto Sans Display + Noto Serif → Global coverage

### Sans Heading + Sans Body (Moderno/Tech)
- Clash Display + Clash Grotesk → Bold tech
- Clash Display + General Sans → Statement moderno
- Satoshi + Inter → Clean contemporâneo
- Sora + Geist → Futurista legível
- Geist + Manrope → Next.js style
- Supreme + Inter → Premium minimal
- Spline Sans + Inter → Geométrico suave
- Spline Sans + Geist → Soft tech
- Unbounded + Geist → Display bold
- Public Sans + Inter → Government clean
- Rethink Sans + Geist → Fresh minimal
- Mona Sans + Hubot Sans → GitHub style
- Hubot Sans + Mona Sans → GitHub invertido
- Albert Sans + Barlow → Industrial clean
- Red Hat Display + Red Hat Text → Corporate friendly
- Funnel Display + Funnel Sans → Rounded moderno
- Montserrat Alternates + Montserrat → Variação sutil
- Archivo Black + Archivo → Impact moderno
- Alpino + Nunito → Rounded + rounded
- Reddit Sans + Sora → Social tech
- Mozilla Headline + Mozilla Text → Open source
- Wix Madefor Display + Wix Madefor Text → Brand system
- Stack Sans Headline + Stack Sans Text → Layered system
- Stack Sans Notch + Stack Sans Text → Notched accent
- Nunito + Nunito Sans → Rounded family
- Varela Round + Varela → Rounded + regular
- Lexend Deca + Lexend → Accessibility duo
- Noto Sans Display + Noto Sans → Global display
- M PLUS Rounded 1c + M PLUS 1p → Japanese rounded

### Mono Accent + Sans Body (Dev/Tech)
- Space Mono + Space Grotesk → Retro futurista
- JetBrains Mono + Inter → Developer first
- IBM Plex Mono + IBM Plex Sans → Terminal corp
- Ubuntu Mono + Ubuntu → Linux official
- Roboto Mono + Roboto → Material code
- Geist Mono + Geist → Vercel style
- Overpass Mono + Overpass → Highway code
- Oxygen Mono + Oxygen → KDE clean
- Azeret Mono + Space Grotesk → Modern terminal
- Inconsolata + Source Sans Pro → Code + content
- Fira Code + Fira Sans → Mozilla dev
- Courier Prime + Work Sans → Typewriter + modern
- Rubik Mono One + Rubik → Bold mono accent

### Condensed + Regular (Editorial/Jornal)
- Roboto Condensed + Roboto → Material dense
- Barlow Condensed + Barlow → Industrial tight
- Fira Sans Condensed + Fira Sans → Mozilla editorial
- Saira Condensed + Saira → Esportivo compacto
- Sofia Sans Condensed + Sofia Sans → Friendly condensed
- Reddit Sans Condensed + Reddit Sans → Social compact
- Asap Condensed + Asap → Rounded tight
- Encode Sans Condensed + Encode Sans → Tech condensed
- Encode Sans Expanded + Encode Sans → Wide headline

### Display Impact (Headlines Únicas)
- Clash Display + Inter → Statement bold
- Unbounded + Geist → Arredondado forte
- Syne + Inter → Art direction
- Fraunces + DM Sans → Vintage display
- Epilogue + Inter → Variable impact
- Instrument Sans + Inter → Sharp modern
- Cabinet Grotesk + Inter → Foundry style
- Lexend + Inter → Accessibility first
- Plus Jakarta Sans + Inter → Premium geometric
- Outfit + Inter → Rounded geometric
- Onest + Inter → Eastern European
- Figtree + Inter → Figma inspired

### Fontes Alternativas (Menos Comuns)
- Hanken Grotesk (Geometric) → Substitui Circular
- Darker Grotesque (Condensed) → Substitui Anton
- Geologica (Variable) → Substitui Roboto
- Schibsted Grotesk (News) → Substitui Guardian
- Atkinson Hyperlegible (Accessible) → Substitui Arial
- Familjen Grotesk (Swedish) → Substitui Akzidenz
- Commissioner (Variable) → Substitui Open Sans
- Wix Madefor (Brand) → Substitui Montserrat
- Stack Sans (Layered) → Substitui System fonts
- Plein (French) → Substitui Helvetica Now
- Roundo (Rounded) → Substitui Nunito
- Sentient (Modern serif) → Substitui Times New Roman
- Gambetta (Editorial) → Substitui Georgia
- Zodiak (Stylish serif) → Substitui Didot
- Author (Handwritten feel) → Substitui Script fonts

---

## REGRAS DE USO

1. **Para CADA secao**, escolha pelo menos:
   - 1 Arquétipo de composicao
   - 2 Constraints criativos de categorias diferentes

2. **NUNCA repita** o mesmo arquétipo em secoes consecutivas

3. **DECLARE** suas escolhas antes de implementar:
   "Secao X: Arquétipo [Y] + Constraints [A, B]"

4. **Para FONTES**, escolha da lista de pairings curados:
   - NUNCA use Montserrat + Open Sans (overused)
   - NUNCA use Poppins + Roboto (overused)
   - NUNCA use Poppins + Poppins (overused)
   - NUNCA use Inter + Inter (overused)
   - NUNCA use Lato + Lato (overused)
   - NUNCA use Roboto + Roboto (overused)
   - NUNCA use Open Sans + Open Sans (overused)
   - PREFIRA pairings de categorias diferentes (serif + sans, display + body)
   - DECLARE: "Fontes: [Heading] + [Body] - [Vibe]"

5. **EVITE** os padroes mais comuns:
   - 3 cards lado a lado
   - Grid simetrico com icones
   - Hero centralizado generico
   - Secao de features com bullets