CreatorCryptoEights →A web case by @CryptoEights created with Gemini 3.1 · React · Framer Motion, including the public result, full prompt, and original source.
View original source ↗Prompt · Original / Translation
Prompt to build the F1 Dashboard: "Build a cinematic, high-end Formula 1 live dashboard using React, Tailwind CSS, and Framer Motion. The design should be dark, immersive, and feel like a professional broadcast overlay. 1. Layout & Background: Set the background to be a full-screen, looping, muted video of a realistic F1 car driving on a track (use this video URL: ). Overlay the video with a dark gradient (black to transparent) from the top, and a red radial gradient from the bottom to simulate an underglow effect. Use a dark theme (bg-[#0a0a0a]) with white text. Import and use Inter for standard text and Space Grotesk for large display numbers and headers. 2. Header & Hero Section: Top bar: Include a back arrow icon, the title 'São Paulo Grand Prix 2026', and buttons for 'Live Updates' and 'Highlights', plus a small US flag icon. Center hero: Display 'Formula 1' in massive, bold text (text-[140px]). Above it, add a small subtitle with the Audi rings logo (SVG), 'Powertrain', a German flag, and 'Neuburg, Germany'. Animate these elements to fade and slide up on load using Framer Motion. 3. Bottom Data Panels (Grid Layout): Create three glassmorphic panels at the bottom (bg-[#111111]/60 backdrop-blur-xl border border-white/5): Panel 1 (Max Speed): Title: 'MAX SPEED' Value: Create a custom React hook/component that smoothly animates a number counting up from 0 to 372.5 over 2.5 seconds. Display 'km/h' next to it. Subtitle: 'Maximum speed recorded during test session'. Panel 2 (Live Track Map): Draw a custom SVG path representing an F1 circuit. Give the path a red/orange stroke with a glowing filter effect. Add three driver markers (P1, P2, P3) that continuously animate along the SVG path using <animateMotion>. The markers should include a small line pointing to the track, a colored box, and a tiny driver photo inside the box. Below the map, show driver details: a Brazilian flag, 'Bortoleto', a clock icon with '8:05/MI', and an activity icon with a green '-0.142'. Panel 3 (Current Lap Time): Title: 'CURRENT LAP TIME' with a green up arrow. Value: Create a custom React component that animates a timecode rapidly ticking up before stopping at exactly 1:11.310 over 3 seconds. Add the driver's name 'Gabriel Bortoleto' and a Brazilian flag. In the bottom right corner of this panel, place a cutout image of a driver that fades out at the bottom using a CSS mask ([mask-image:linear-gradient(to_top,black_50%,transparent)]). 4. Polish: Ensure all panels stagger their entrance animations (fade in and slide up) when the page loads. Use lucide-react for icons (ArrowLeft, Clock, Activity). Make the layout fully responsive, stacking the bottom panels on mobile and placing them side-by-side on desktop." Note on the video URL: The Streamable URL in the prompt contains an expiration token. If someone tries to build this in the future and the video doesn't load, they can replace that URL with any looping MP4 video link (like a Pixabay video) or re-upload a video to get a fresh link!
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 🛒
Creator
CryptoEights focuses on production-ready AI interfaces and is active on X. “Gemini Formula 1 Dynamic Data Dashboard” is the current representative case, built with Gemini 3.1 · React · Framer Motion 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.
