--- version: "alpha" name: "Democratized Fancy Animations" description: "Visually stunning landing page with democratized fancy animations using CSS and lightweight WebGL-inspired effects. Ideal for landing pages premium, portfolios criativos, lancamentos de produto tech, agencias digitais, experiencias imersivas, showcases de design. AI-ready template." colors: primary: "#050510" secondary: "#1a1a4e" tertiary: "#F0F0FF" neutral: "#7B2FBE" surface: "#00E5FF" accent: "#FF4081" typography: h1: fontFamily: Space Grotesk fontSize: 2.25rem fontWeight: 700 body-md: fontFamily: Inter fontSize: 1rem fontWeight: 400 label-caps: fontFamily: Inter fontSize: 0.75rem fontWeight: 500 components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.neutral}" padding: 12px --- ## Overview Visually stunning landing page with democratized fancy animations using CSS and lightweight WebGL-inspired effects. Ideal for landing pages premium, portfolios criativos, lancamentos de produto tech, agencias digitais, experiencias imersivas, showcases de design. AI-ready template. For years, WebGL shader effects lived behind a wall of GLSL expertise and linear algebra. You either came from a demoscene background or you didn't touch it. The barrier wasn't creative — it was purely technical. Fragment shaders, vertex manipulation, render passes — this was territory reserved for graphics programmers, not designers who wanted a fluid distortion on their hero section. Then Three.js matured. OGL offered a lighter alternative. Shader playgrounds like The Book of Shaders and Shadertoy turned opaque GPU code into something you could poke at, remix, and learn from. Suddenly a frontend developer with curiosity could produce effects that previously required a dedicated WebGL engineer. Libraries like curtains.js and react-three-fiber collapsed the gap further — you could drop shader materials into a component tree. The democratization wasn't instant, but it was decisive. By 2023, fluid distortion, noise-driven meshes, and post-processing passes became viable design tools rather than engineering feats. The craft shifted from 'can we build this' to 'should we ship this' — a much healthier question. - Density: 5/10 — Balanced - Variance: 4/10 — Moderate - Motion: 8/10 — Cinematic - **Style:** WebGL, Shader-Driven, Fluid Distortion, Interactive 3D, Story-Driven Motion - **Keywords:** WebGL, shaders, fluid distortion, volumetric light, chromatic aberration, particle physics, blob tracking, Spline, Rive, interactive 3D, story-driven motion, 120fps, lightweight engine, mouse-reactive - **Era:** 2025-2026 WebGL Democratized - **Light/Dark:** ✗ None / ✓ Full ## Colors - **Preto Profundo** (#050510) — Primary background surface - **Azul Cosmico** (#1a1a4e) — Accent highlight, links and focus states - **Branco Luminoso** (#F0F0FF) — Light surface, card backgrounds - **Roxo Shader** (#7B2FBE) — Accent color, emphasis elements - **Ciano Glow** (#00E5FF) — Extended palette, decorative use - **Rosa Plasma** (#FF4081) — Decorative accent, highlight elements - **Dourado Particula** (#FFD54F) — Premium accent, decorative highlights ## Typography - **Display / Hero:** Space Grotesk — Weight 700, tight tracking, used for headline impact - **Accent:** Inter — Used for decorative or emphasis text - **Body:** Space Grotesk — Weight 400, 16px/1.6 line-height, max 72ch per line - **UI Labels / Captions:** Space Grotesk — 0.875rem, weight 500, slight letter-spacing - **Monospace:** JetBrains Mono — Used for code, metadata, and technical values Scale: - Hero: clamp(2.5rem, 5vw, 4rem) - H1: 2.25rem - H2: 1.5rem - Body: 1rem / 1.6 - Small: 0.875rem ## Layout - **Grid:** CSS Grid primary. Max-width containment: 1280px centered with 1.5rem side padding. - **Spacing rhythm:** Balanced. Base unit: 0.5rem (8px). - **Section vertical gaps:** clamp(4rem, 8vw, 8rem). - **Hero layout:** Split-screen (text left, visual right). - **Feature sections:** Zig-zag alternating text+image rows. No 3-equal-columns. - **Mobile collapse:** All multi-column layouts collapse below 768px. No horizontal overflow. - **z-index contract:** base (0) / sticky-nav (100) / overlay (200) / modal (300) / toast (500). ## Elevation & Depth Elementos reagindo ao usuario em tempo real via shaders e WebGL: distorcoes de fluidos no fundo, luzes volumetricas com profundidade, brilhos baseados em profundidade, aberracoes cromaticas sutis, simulacoes fisicas (gravidade e colisao de particulas) leves (~29kb engine), blob tracking seguindo o mouse, transicoes de secao com morphing fluido, parallax 3D reativo ao cursor - **Physics:** Spring — stiffness 120, damping 20. Confident, weighted transitions. - **Entry animations:** Fade + translate-Y (16px → 0) over 540ms ease-out. Staggered cascades for lists: 120ms between items. - **Hover states:** Scale(1.03) + shadow lift over 200ms. - **Page transitions:** Fade + slide (300ms). - **Performance:** Only transform and opacity animated. No layout-triggering properties. ## Shapes Base corner radius: 8px. See rounded tokens in front matter for the full scale. ## Components - **Primary Button:** Subtly rounded (0.5rem) shape. Accent color fill. Hover: 8% darken + subtle lift shadow. Active: -1px translate tactile press. Font weight 600. No outer glows. - **Secondary / Ghost Button:** Outline variant. 1.5px border in muted color. Text in primary color. Hover: subtle background fill. - **Cards:** Subtly rounded (0.5rem) corners. Surface background. Subtle shadow (0 2px 12px rgba(0,0,0,0.06)). 1px border stroke. - **Inputs:** Label above input. 1px border stroke. Focus ring: 2px accent color offset 2px. Error text below in semantic red. No floating labels. - **Navigation:** Primary surface background. Active item: accent color indicator. Font weight 500 when active. - **Skeletons:** Shimmer animation matching component dimensions. No circular spinners. - **Empty States:** Icon-based composition with descriptive text and action button. ## Do's and Don'ts - No emojis in UI — use icon system only (Lucide, Heroicons) - No pure black (#000000) — use off-black or charcoal variants - No oversaturated accent colors (saturation cap: 80%) - No 3-column equal-width feature layouts — use zig-zag or asymmetric grid - No `h-screen` — use `min-h-[100dvh]` - No AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen" - No broken external image links — use picsum.photos or inline SVG - No generic lorem ipsum in demos - Do Fundo cosmico escuro com efeito fluido SVG - Do Luzes volumetricas com radial-gradient animado - Do Aberracao cromatica no hover de titulos - Do Particulas flutuantes com CSS keyframes - Do Blob gradient seguindo o mouse - Do Transicoes de secao com clip-path morphing - Do Parallax reativo ao cursor - Do GPU-accelerated com will-change e translate3d - Do Animacoes narrativas no scroll ## Use Case Landing pages premium, Portfolios criativos, Lancamentos de produto tech, Agencias digitais, Experiencias imersivas, Showcases de design