motionsites.ai

awwwards.com

cssdesignawards.com

thefwa.com

siteinspire.com

recent.design

httpster.net

minimal.gallery

land-book.com

lapa.ninja

onepagelove.com

savee.com

cosmos.so

are.na

designspiration.com

niice.com

dribbble.com

behance.net

prompt-motion.com

60fps.design

ripplix.com

tympanus.net/codrops

lottiefiles.com

rive.app

shadertoy.com

unicorn.studio

shaders.paper.design

thebookofshaders.com

glslsandbox.com

shaderpark.com

spline.design

polyhaven.com

threejs.org/examples

sketchfab.com

shapefest.com

styles.refero.design

refero.design

mobbin.com

gsap.com

animejs.com

motion.dev

lenis.dev

threejs.org

theatrejs.com

44 sites para abrir antes de criar

Galerias premiadas, transições, shaders, 3D e telas de produto real. Cada card diz o que é e quando consultar.

Ver os 18 destaques

Cada site abre em aba nova. Aperte / para buscar.

11sites3

Abra antes de montar landing, estrutura de página ou hero.

Web Sites

7sites2

Abra para decidir paleta, composição e tipografia antes de produzir.

Design

6sites3

Abra na hora de animar entrada, scroll, hover e troca de tela.

Transições

6sites3

Abra quando a página pede shader, distorção ou textura animada em WebGL.

Efeitos

5sites3

Abra para achar modelo, textura e editor que exporta direto para a web.

3sites1

Abra ao desenhar app, dashboard, área de membros ou painel.

Interfaces

6sites3

Abra quando a referência já existe e falta a biblioteca que faz ela rodar.

Código

Da referência ao prompt

Passo 1
Busque
Aperte / e digite o nome, o efeito ou o uso que você precisa.
Passo 2
Filtre por tema
Escolha um dos 7 temas e veja só o que serve agora.
Passo 3
Veja os destaques
Ligue o botão “só destaques” e fique com os 18 mais fortes.
Passo 4
Leve para o projeto
Abra o site, pegue o link ou o print e mostre à IA ou ao cliente.

Os 18 que você abre primeiro

Se o tempo é curto, comece aqui: o melhor de cada tema.

motionsites.ai

Web Sites

Motionsites

Transições

O que é: Galeria de sites com motion, cada um com o prompt pronto para recriar. Abas de sites, dashboards, social, backgrounds e 3D
Quando consultar: Hero cinematográfico, scroll com vídeo, efeito que precisa sair pronto em prompt

Acesso: A conferirAbrir em nova aba

awwwards.com

Web Sites

Awwwards

Design

O que é: Premiação diária de sites. Filtro por técnica: WebGL, scroll, 3D, transições
Quando consultar: Referência de topo de mercado e tendência do ano

Acesso: Grátis para navegarAbrir em nova aba

recent.design

Web Sites

Recent (ex-Godly)

Design

O que é: Feed curado de sites de alto nível, com prévia em vídeo
Quando consultar: Hero e motion de página atual

Acesso: A conferirAbrir em nova aba

savee.com

Design

Savee

Design

O que é: Moodboard visual com curadoria de designers
Quando consultar: Direção de arte, foto, composição

Acesso: A conferirAbrir em nova aba

cosmos.so

Design

Cosmos

Design

O que é: Moodboard visual, alternativa limpa ao Pinterest
Quando consultar: Coleção de referências por projeto

Acesso: A conferirAbrir em nova aba

prompt-motion.com

Transições

Prompt Motion

Transições

O que é: Biblioteca de motion graphics com prompt
Quando consultar: Motion graphic pronto para gerar

Acesso: A conferirAbrir em nova aba

60fps.design

Transições

60fps.design

Transições

O que é: Mais de 550 vídeos de animação de interface, separados por tag
Quando consultar: Microinteração e transição de app

Acesso: Grátis + Pro (pagamento único)Abrir em nova aba

tympanus.net/codrops

Transições

Codrops

TransiçõesEfeitos

O que é: Tutoriais e demos de efeitos web com código aberto
Quando consultar: Copiar a técnica de um efeito com código

Acesso: GrátisAbrir em nova aba

shadertoy.com

Efeitos

Shadertoy

Efeitos

O que é: Comunidade de shaders com o código aberto ao lado
Quando consultar: Efeito de luz, fluido, ruído, fundo animado

Acesso: GrátisAbrir em nova aba

unicorn.studio

Efeitos

Unicorn Studio

Efeitos

O que é: Editor de efeitos WebGL sem código, com mais de 70 efeitos
Quando consultar: Fundo animado sem programar

Acesso: Plano grátis não permite uso comercialAbrir em nova aba

shaders.paper.design

Efeitos

Paper Shaders

Efeitos

O que é: 28 shaders prontos em pacote npm (JS e React)
Quando consultar: Gradiente vivo, malha, ruído pronto para colar

Acesso: Open source, com restrição de licençaAbrir em nova aba

spline.design

Spline

O que é: Editor 3D no navegador que exporta para web, com biblioteca de cenas
Quando consultar: Objeto 3D interativo na hero

Acesso: Grátis + pagoAbrir em nova aba

polyhaven.com

Poly Haven

O que é: Texturas, HDRIs e modelos grátis, licença CC0
Quando consultar: Ambiente, luz e textura realista

Acesso: Grátis (CC0)Abrir em nova aba

threejs.org/examples

Exemplos do Three.js

O que é: Vitrine técnica do que dá para fazer em 3D na web
Quando consultar: Ver se um efeito 3D é viável e copiar a base

Acesso: GrátisAbrir em nova aba

styles.refero.design

Interfaces

Refero Styles

O que é: Estilos de sites com o prompt pronto
Quando consultar: Recriar um estilo visual por prompt

Acesso: A conferirAbrir em nova aba

gsap.com

Código

GSAP

Código pronto

O que é: Biblioteca de animação JavaScript, com ScrollTrigger para scroll
Quando consultar: Linha do tempo, scroll animado, pin de seção

Acesso: GrátisAbrir em nova aba

motion.dev

Código

Motion

Código pronto

O que é: Antigo Framer Motion. Animação para React e JS
Quando consultar: Animação em projeto React

Acesso: Grátis + Motion+Abrir em nova aba

lenis.dev

Código

Lenis

Código pronto

O que é: Scroll suave, comum nos sites premiados
Quando consultar: Scroll com sensação premium

Acesso: Grátis (MIT)Abrir em nova aba

Os melhores por uso

Uso	Sites
Transições4 sites	MotionsitesWeb SitesGaleria de sites com motion, cada um com o prompt pronto para recriar. Abas de sites, dashboards, social, backgrounds e 3D 60fps.designTransiçõesMais de 550 vídeos de animação de interface, separados por tag CodropsTransiçõesTutoriais e demos de efeitos web com código aberto Prompt MotionTransiçõesBiblioteca de motion graphics com prompt
Design4 sites	AwwwardsWeb SitesPremiação diária de sites. Filtro por técnica: WebGL, scroll, 3D, transições SaveeDesignMoodboard visual com curadoria de designers Recent (ex-Godly)Web SitesFeed curado de sites de alto nível, com prévia em vídeo CosmosDesignMoodboard visual, alternativa limpa ao Pinterest
Efeitos4 sites	ShadertoyEfeitosComunidade de shaders com o código aberto ao lado Unicorn StudioEfeitosEditor de efeitos WebGL sem código, com mais de 70 efeitos Paper ShadersEfeitos28 shaders prontos em pacote npm (JS e React)CodropsTransiçõesTutoriais e demos de efeitos web com código aberto
3D3 sites	Spline3DEditor 3D no navegador que exporta para web, com biblioteca de cenas Poly Haven3DTexturas, HDRIs e modelos grátis, licença CC0 Exemplos do Three.js3DVitrine técnica do que dá para fazer em 3D na web
Código pronto3 sites	GSAPCódigoBiblioteca de animação JavaScript, com ScrollTrigger para scroll MotionCódigoAntigo Framer Motion. Animação para React e JS LenisCódigoScroll suave, comum nos sites premiados

Sites por tema44

Web Sites113 Design72 Transições63 Efeitos63 3D53 Interfaces31 Código63

Acesso44

Grátis22
Grátis + pago9
Pago1
A conferir12
Ponto âmbar: destaque do tema

11 sites3 destaques