CreatorKashberg_0 →A webpage case created by @Kashberg_0 with Grok Imagine 1.5 · Grok Build, including the public result, full prompt, and original source.
View original source ↗Prompt · Original / Translation
Built this Animated 3D Website with 1 Prompt.
Grok Imagine 1.5 + Grok Build.
Prompt:
Build a single-page fullscreen hero section for a brand called "SynapseX" using React, Vite, Tailwind CSS v4, and Framer Motion (`motion/react`). Use the `lenis` library for smooth scrolling on desktop. The page is a dark, cinematic fullscreen video-backed landing with scroll-driven animations and text scramble effects. --- **Tech stack:** - React 19, Vite, TypeScript - Tailwind CSS v4 (via `@tailwindcss/vite` plugin) - `motion` (Framer Motion v12+, imported from `motion/react`) - `lenis` for smooth scroll on desktop only - Font: "Space Mono" monospace from Google Fonts (used for ALL font families: sans, serif, mono) - Bootstrap Icons CDN for the Apple icon (`bi bi-apple`) --- **Font / CSS setup (`index.css`):** - Import Google Fonts: `Space Mono` (400, 700, italic variants) - Import Bootstrap Icons CSS from jsdelivr CDN - Import `tailwindcss` - Override all Tailwind font theme vars (`--font-sans`, `--font-serif`, `--font-inter`, `--font-mono`) to `"Space Mono", monospace` - `html, body`: font-family var(--font-sans), bg black, color white, no margin/padding, overflow-x hidden, overflow-y auto - Lenis compatibility classes (`.lenis.lenis-smooth`, `.lenis.lenis-stopped`, `.lenis.lenis-scrolling iframe`) --- **Background video (CRITICAL - read carefully):** - URL: `` - Rendered in a `LiquidVideoCanvas` component: a fixed fullscreen `<video>` element (loop, muted, playsInline, preload="auto", object-cover) **IMPORTANT - NO DARK OVERLAY:** The video container must have NO dark overlay, NO semi-transparent black layer, NO `bg-black/50`, NO `::after` pseudo-element with opacity, and NO gradient overlay on top of the video. The video should be fully visible at its natural brightness. The only container background should be `bg-black` on the wrapper div itself (visible only before the video loads). Do NOT add any darkening filter, overlay div, or tint on top of the video. **IMPORTANT - Z-INDEX LAYERING (must follow exactly):** - Video container: `fixed inset-0 z-[1]` - this is the LOWEST layer - Progressive blur: `fixed bottom-0 z-30` - Main content (text, headings): `z-10` (above video, below header) - Header: `z-50` (topmost) - The root wrapper is `relative` with `overflow-x-hidden`. The main content area must NOT have a background color that would obscure the video. The video must always be VISIBLE through the content layers. Do NOT set `bg-black` on any element that sits above the video container. **Video scroll-scrubbing (CRITICAL - frame seeking logic):** - The video is NOT autoplayed. Its `currentTime` is driven by scroll progress via requestAnimationFrame with LERP smoothing (factor 0.12). - **Frame-accurate seeking with `if (!video.seeking)` guard:** Only request a new video frame seek when the browser has completely finished rendering the previous frame. This prevents frame-skipping, jank, and black flashes. The pattern: ``` if (!isSeeking && !video.seeking) { isSeeking = true; video.currentTime = clampedTime; } else { nextSeekTime = clampedTime; // queue for after current seek completes } ``` We tell the browser: "Update the video frame ONLY when you have completely finished painting the previous one." This is essential for smooth, buttery playback on all devices. Without this guard, multiple overlapping seeks cause the video to show black frames or stutter. - Listen for `seeking` and `seeked` events on the video element. On `seeked`, check if there's a queued `nextSeekTime` and execute it. **Entrance animation:** - Starts at scale 1.12, opacity 0. On video `readyState >= 3`, animates over 1.4s with cubic ease-out to scale 1.0, opacity 1. Has a 3.5s safety timeout fallback. **Scroll-driven visual effects (applied directly to DOM via ref, NOT via React state):** - Progressive blur: 0-55px based on scroll (subtle base 0-5px in first half, then aggressive 5-55px in second half).Reusable method
Reusable structure
Extract “target result → the product name, audience, page modules, and primary button → constraints” as a reusable template for similar work.
Retest criteria
Run single-variable comparisons around module order, value proposition, and CTA placement. Record the model, cost, and failures; turn it into a Skill only after it repeats reliably.
Recommended models
Keep exploring
A webpage case by @Oluwaphilemon1 using Claude Fable 5 · Three.js · Blender · GSAP, including the public result, full prompt, and original source.
Prompt
Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵 Here Is How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render all products in real time in the browser Use Blender to model the packaging then export as GLTF to load in Three.js Use GSAP for the smooth product rotation and hover interactions Save this if you want a portfolio that makes clients feel they are buying something premium 🛒
Derived Skill
Skills are derived from repeated patterns in published cases. They are not a separate submission type.
Creator
Kashberg_0 focuses on production-ready AI interfaces and is active on X. “Early Internet-Style Personal Profile Page” is the current representative case, built with ChatGPT Image 2 awaiting a stability retest.
A webpage case by @uxsweta using AI UI Builder, including the public result, full prompt, and original source.
Prompt
Few people asked for the prompt, so here it is 👇 PS: Tweak it based on your use case. Create a modern, minimal 3D Invoice Generator Machine component with a premium SaaS-style aesthetic. Visual Design - Design a wide, horizontal invoice printing machine inspired by receipt printers, but with a futuristic and clean appearance. - Use subtle gray strokes, soft shadows, and minimal details. - The machine should feel premium, lightweight, and modern rather than realistic or industrial. - Keep the overall design clean enough to fit inside a dashboard or landing page hero section. - Add a single prominent "Print Invoice" button directly on the machine. Animation When the user clicks the "Print Invoice" button: - The machine should react with a subtle press/click animation. - A receipt should gradually emerge from the printer slot. - The receipt must animate smoothly from inside the machine to outside, giving the impression that it is being physically printed. - The animation should feel realistic, fluid, and satisfying. - The receipt should slide out line-by-line rather than appearing instantly. - Add slight motion easing and subtle paper movement for realism. Receipt Design The receipt should remain highly minimal and editable. Do NOT fill it with complex customer information. Use placeholder content such as: Customer Name Product Total Amount The receipt should look like a clean invoice preview rather than a detailed bill. Interaction - The receipt should be hidden initially. - It should only appear after clicking the Print Invoice button. - The animation should be repeatable every time the user clicks the button. - Include smooth transitions and micro-interactions throughout. Style References Apple-style minimalism Linear / Stripe design quality Premium SaaS dashboard aesthetic Soft gray strokes Clean typography Modern 3D illustration High attention to interaction details Goal: Create a delightful visual experience where users feel like an invoice is actually being generated and printed from a beautiful 3D machine, rather than simply appearing on the screen.
A webpage case by @shushant_l using AI Website Builder, including the public result, full prompt, and original source.
Prompt
Here's how to create your website in minimalist design style with AI. Use this prompt: Design a modern minimalist portfolio website for a digital creator and AI consultant. Use a clean black, white, and neutral color palette with no gradients, glassmorphism, or excessive visual effects. Focus on simplicity, whitespace, strong typography, clear hierarchy, and fast loading performance. Include a hero section with a professional introduction and call-to-action, an about section, featured projects portfolio, services section, testimonials, blog/articles preview, skills and tools showcase, client logos, contact form, and footer. Use subtle animations, smooth scrolling, elegant card layouts, responsive mobile-first design, and SEO-friendly structure. The overall aesthetic should feel premium, professional, timeless, and highly readable with a strong emphasis on content and usability. Note: Customise this prompt to your use case. I've built this with Replit, and you can also build with it, or else you can also build it with any other AI model, LLM, and AI tool too.