4,8 k vues
Cast and Render
Cast and Render : section hero animée pensée pour une expérience 3D/WebGL, construite avec React, Tailwind CSS, GSAP.
Build a single, self-contained `index.html` file — one file, no build step, no dependencies, no frameworks. All CSS in one `<style>` block in `<head>`, all JS in one IIFE `<script>` block at the end of `<body>`. It is a scroll-scrubbed video landing page for a fictional 3D studio called "Cast & Render". Scrolling the page does not move the page content — it scrubs a fixed full-screen background video frame by frame, while three text panels cross-fade in and out over it. ============================================================ 1. DOCUMENT HEAD ============================================================ - `<!DOCTYPE html>`, `<html lang="en">`. - `<meta charset="UTF-8">` - `<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">` (viewport-fit=cover is required for the safe-area insets used later). - `<title>Cast & Render — 3D Object Studio</title>` - Preconnects, in this order: - `<link rel="preconnect" href="https://fonts.googleapis.com">` - `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`
Débloquer le Prompt Studio à vie
331 lignes masquées : architecture complète, classes Tailwind, animations et intégration vidéo.
Accès illimité à tous les prompts · Studio inclus · Paiement unique
- Typographies
- Inter Tight
- Palette
