Start with the work. Trace it back to the maker and method.

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!

Gemini 3.1 Pro is insane at website design. Exact prompt to use: UI/UX web design for an [insert company], dark mode, minimalist, premium corporate tech aesthetic. Abstract 3D flowing fluid background shapes, glowing luminescent gradients in deep blue, purple, and emerald green. Card-based layout with subtle glassmorphism, clean sans-serif typography, high contrast white text, and generous negative space. High fidelity, 8k, Dribbble style, sleek and futuristic." Key elements to include if you modify the prompt: Color Palette: Dark background with vibrant, glowing neon accents. Typography: Modern, clean sans-serif fonts. Graphics: Abstract, fluid 3D waves or light ribbons. Layout: Spacious, card-based, and highly structured.

Prompt: Build a hero section with the following exact specifications: Overall Layout: Full-width section with background: #000000 (pure black) Overflow hidden Background video playing behind all content (details below) Background Video: Source: Autoplay, loop, muted, playsInline Scaled to 120% of the container (width and height both 120%) Horizontally centered, focal point anchored to the bottom Sits behind all content (lowest z-index) Blurred Background Element: Absolute positioned, horizontally centered, top offset ~215px Size: 801px wide × 384px tall, fully rounded (pill shape) Color: pure black #000000 Blur: 77.5px z-index: 1 (above video, below content) All text and UI content sits at z-index: 2 (above everything) Navbar (top): Max width: 1440px, centered horizontally Horizontal padding: 120px, vertical padding: 16px, height: 102px Flexbox row, space-between alignment Left side: Logo + nav links with 80px gap between them Logo: "LOGOIPSUM" SVG mark, 134px × 25px, white fill Nav links in a row with 10px gap between items Each link: font Manrope, medium weight, 14px size, 22px line-height, white color, padding 10px horizontal / 4px vertical Items: "Home", "Services" (with a 24×24 white chevron-down icon to the right, 3px gap), "Reviews", "Contact us" Right side: Two buttons with 12px gap "Sign In" button: white background, 16px horizontal / 8px vertical padding, 8px border-radius, Manrope semibold 14px/22px, color #171717, with a 1px #d4d4d4 border overlay "Get Started" button: background #7b39fc (purple), 16px/8px padding, 8px border-radius, Manrope semibold 14px/22px, color #fafafa, subtle box-shadow 0px 4px 16px rgba(23,23,23,0.04) Hero Content (centered below navbar): Flex column, centered, max-width 871px, top margin 162px 24px gap between heading block and buttons Heading block: flex column, 10px gap, center-aligned text Line 1: "Automate repetitive." — font Inter, medium weight, 76px, white, letter-spacing -2px, line-height 1.15 Line 2: "Focus on growth." — font Instrument Serif, italic, 76px, white, letter-spacing -2px, line-height 1.15 Subtitle: "The next-generation AI agent platform that handles lead generation, customer support, and data entry while you build." — font Manrope, regular weight, 18px, 26px line-height, color #f6f7f9, opacity 90%, max-width 613px CTA Buttons: flex row, 22px gap, vertically centered "Get Started Free": background #7b39fc, padding 24px horizontal / 14px vertical, 10px border-radius, font Cabin medium 16px, line-height 1.7, white text "Watch 2min Demo": background #2b2344 (dark purple), same padding/radius/font specs, color #f6f7f9 Dashboard Image (below hero content): Centered, top margin 80px, bottom padding 40px Outer container: 1163px wide (max 90% of viewport), 24px border-radius, backdrop-blur 10px, background rgba(255,255,255,0.05) (glassmorphic), transparent border 1.5px Inner padding: 22.5px all sides Image inside: full width, auto height, 8px border-radius, object-fit cover

PROMPT: Build a premium electric vehicle landing page with a dark, cinematic aesthetic. The entire site uses a black background (hsl(0,0%,0%)) with light text (hsl(0,0%,95%) as primary) and orange accents (hsl(25,100%,50%)). No default fonts — keep it minimal and editorial. Use shadcn/ui design tokens. Here are the sections in order: Design System (index.css) --background: 0 0% 0% --foreground: 0 0% 12% (used for dark elements like CTA button inner circles) --primary: 0 0% 95% (near-white, used for all text) --primary-foreground: 0 0% 12% --accent-warm: 25 90% 55% (orange accent) All section backgrounds are pure black hsl(0,0%,0%) Section 1: Navbar Fixed top, full-width, rounded-full pill shape Transparent initially, on scroll: black bg with backdrop-blur-xl, border primary/10 Logo left: "Electric" with an orange dot "." — logo color changes from black to white on scroll Nav links: Services, About, Team, Contact — hover has a scale-up rounded bg pill effect CTA button right: "Get Started" with a rounded-full pill, contains an ArrowUpRight icon inside a circular foreground bg CTA switches from black bg to white bg on scroll Mobile: hamburger menu, opens a rounded dark overlay with links + CTA Section 2: Hero Full viewport height, video background (/videos/hero_bg.mp4, autoplay, loop, muted) Large heading top-left: "Drive Beyond. / Unlock Pure Power" — white text, 78px on desktop Below heading: "Learn more" link with arrow icon, bordered button (border-foreground), no fill Section 3: Connected Systems (BigLinks) Top half: Video background (/videos/biglinks_bg.mp4) with 60% black overlay Left-aligned content: pill badge "Connected Systems", heading "Seamlessly Integrate / Every System", subtitle paragraph 12-column icon grid (4 cols mobile, 6 tablet, 12 desktop): each icon is 80x80px, rounded-xl, border white/10, bg white/5, backdrop-blur. Icons are orange with glow (drop-shadow-[0_0_8px_hsl(25,100%,50%)]). Icons: Gauge, Zap, Shield, Cog, Fuel, Navigation, Bluetooth, Wifi, Radio, Car, Wrench, Settings (from lucide-react) "Explore All" rounded pill border button Bottom half: 3 big full-width text links stacked vertically: "Find a dealer", "Fleet & lease", "Book a test drive" — each is huge text (110px desktop), with a ChevronRight icon right-aligned, separated by border-b border-primary/10, hover reduces opacity Section 4: Services Video background (/videos/services_card.mp4, autoplay, loop, muted) Centered content: pill badge "Next-Gen Driving", heading "Design, build and perfect / every single detail" Below: a glass-morphism card (max-w-2xl, centered, bg-primary/5 backdrop-blur-xl border-primary/10 rounded-2xl)Heading: "Effortless, All-Electric / Performance" Paragraph describing adaptive tech 3 bullet points with orange Zap icons (with glow): "Full-spectrum torque & drivetrain control", "Personalised driving & comfort profiles", "Track range & plan routes easily" Section 5: About Black bg, left-aligned Label: line + "About Us" text Heading: "Why You Absolutely Should / Experience Our Electric Range" (last part in primary/50) Below: two-column layoutLeft: 3 abstract shape images side by side (shape-1.png, shape-2.png, shape-3.png), each object-contain, 256px tall Right: two paragraphs of body text in primary/70 Section 6: Audience (For Whom?) Black bg, left-aligned Label: line + "For Whom?" Heading: "Who Should Experience / Our Electric Range" (second line in primary/50) 4-column grid of cards:First card: circular with a background image (audience-icon.png), aspect-square rounded-full border-primary/10 Other 3 cards: rounded-3xl bordered cards with lucide icons (Users, Gauge, Wrench) in primary/50, label text below Bottom: rounded info bar with descriptive paragraph Section 7: CTA Black outer bg, inner rounded-2xl card with video bg (/videos/services_card.mp4) + 50% black overlay Left-aligned content: heading "Experience the future / of driving today." Subtitle: "Book your test drive — one click, instant access. / No commitment, pure electric." Rounded-full CTA button: "Book a Test Drive" with ArrowUpRight in a circular foreground-colored badge, pill shape with bg-primary Assets needed: 4 videos: hero_bg.mp4, biglinks_bg.mp4, services_card.mp4 (used twice: services + CTA) 3 abstract shape PNGs: shape-1.png, shape-2.png, shape-3.png 1 audience icon image: audience-icon.png Use lucide-react for all icons Key design patterns: All section padding: px-7 py-16 md:px-12 lg:px-20 lg:py-24, max-w-7xl centered Label pattern: h-px w-6 bg-primary/40 line + small text Badge pattern: rounded-full pill with border primary/30, uppercase tracking-widest CTA button pattern: rounded-full, bg-primary text-primary-foreground, with inner circular icon badge Orange accent color used only for: logo dot, icon glows, specific highlights — always hsl(25,100%,50%) with optional drop-shadow glow