3D & Modelagem
Claude 3.5 Sonnet
Cena 3D Interativa com Spline, React e Tailwind
Cena 3D interativa do Spline em Next.js/React com parallax de cursor, loading e fallback acessível.
0cópias
0joinhas
0favoritos
O prompt
Crie um componente React (Next.js 14 App Router, Client Component) moderno e resiliente para renderizar uma cena 3D interativa do Spline, exportado como {{nome_componente}}.
Parâmetros:
- Nome do Componente: {{nome_componente}}
- URL da Cena Spline: {{spline_scene_url}}
- Fallback em caso de lentidão: {{fallback_texto}}
Requisitos:
1. Usar '@splinetool/react-spline' apontando para a cena {{spline_scene_url}}, com carregamento preguiçoso (lazy loading / dynamic import sem SSR).
2. Skeleton animado em Tailwind CSS com efeito de shimmer enquanto o arquivo .splinecode faz o download.
3. Rastreamento da posição do cursor do mouse para aplicar leve inclinação 3D de perspectiva (tilt parallax).
4. Tratamento robusto de erro caso a conexão falhe, mostrando {{fallback_texto}} e botão de tentar novamente.
5. Totalmente responsivo com altura adaptável para mobile e desktop.
Como usar
- Crie sua cena em spline.design e copie a URL exportada (.splinecode).
- Substitua {{nome_componente}} (PascalCase), {{spline_scene_url}} e {{fallback_texto}}.
- Cole no Claude ou Cursor dentro de um projeto Next.js 14 — o @splinetool/react-spline é instalado automaticamente.
- Use o componente na página: o skeleton shimmer aparece durante o download; se a rede falhar, o fallback com botão 'tentar novamente' assume.
Exemplo de saída
Componente 'use client' (~90 linhas): dynamic import do ReactSpline sem SSR, skeleton Tailwind com shimmer animado, tilt de cursor via requestAnimationFrame (máx. 6°), estado de erro com mensagem e botão de retry, altura responsiva (70vh no mobile).