Grok Imagine + Grok Build: a cinematic racing website

The video begins from the frame defined by Image 1 a crumpled orange-and-yellow energy drink can with abstract geometric patterns. Use Image 2 for the Formula 1 race car’s exact red-and-yellow bodywork, white logo, person silhouette on the nose, black carbon-fiber wings, tires, and overall structure so the transformation arrives at that precise final form without altering the opening composition. The shot begins naturally from that frame as the can starts to shake and vibrate. It then mechanically unfolds, expands, and transforms seamlessly into the Formula 1 car while remaining fully centered. A slow continuous zoom-out reveals more of the completed car as the transformation finishes. The camera stays locked on the centered subject with no cuts and no rotation. At the end the fully formed Formula 1 car sits centered in the white space, matching Image 2

Use the attached studio image as the exact vehicle reference. Preserve its proportions, livery, wheels, and every aerodynamic detail. Place the stationary Formula 1 car against a completely black, empty background. Surround the body with hundreds of thin, illuminated white airflow lines moving smoothly from right to left across the front wing, wheels, sidepods, cockpit, and rear wing. Keep white exclusively for the airflow lines. Add only subtle atmospheric haze and a faint neutral reflection beneath the car. No fans, machinery, walls, lasers, equipment, text, people, architecture, or additional objects in the background. Keep the car sharp while the airflow forms long, smooth motion trails. Scientific, minimal, experimental, cinematic, and photorealistic. Wide 16:9 composition.---

Use the attached studio image as the exact vehicle reference. Preserve the Formula 1 car’s proportions, livery, colors, wheels, and recognizable identity. Transform the white studio scene into an extremely motion-blurred cinematic racing shot at night. Show the car speeding across a dark, glossy track from a dynamic rear three-quarter angle. Apply intense directional motion blur across almost the entire frame. Stretch the environment into long diagonal bands of deep black, charcoal, dark crimson, muted burgundy, and restrained red light. Keep the palette calm, dark, and controlled, with no blue, violet, indigo, or lavender tones. The racetrack and background should become nearly abstract, with no recognizable location details. Let the car partially dissolve into the motion. Keep only its central silhouette and key livery details readable, while its edges, wheels, wings, and reflections smear into long trails. Add heavy wheel blur, subtle red speed streaks, dark atmospheric haze, restrained bloom, and a glowing red rear light stretched into a long trail. Make it feel like experimental long-exposure motorsport photography captured at extreme speed—dark, minimal, cinematic, and highly realistic. Prioritize black negative space, controlled red highlights, and motion over sharp detail.

smooth cinematic transition

Build a polished, responsive editorial landing page called PRESSURE / VELOCITY. Use the two attached videos exactly. Do not generate replacements, crop out the main subject, add stock footage, or change their visual identity. Video One begins with the crushed can and ends with the Formula 1 car in the white studio. Video Two begins with that studio car and transitions into the abstract high-speed racing shot. The page is one continuous story: 1. Stored energy: the crushed can waits, centered, in the hero. Do not autoplay. 2. Released energy: clicking the picture plays Video One once. 3. Full velocity: after Video One ends, or the user chooses “Click to enter,” vertical scrolling scrubs Video Two forward and backward. When scrolling stops, the video stops immediately. Feel: a premium digital editorial experiment. Bold type, precise graphic system, restrained motion, strong art direction. No glassmorphism, no generic shadows, no thick red rules, no large red blocks. TYPOGRAPHY - Titles: Inter Tight, weight 600, letter-spacing -0.075em, uppercase where noted. - Body: Barlow. - Meta: IBM Plex Mono. - Hero title “Pressure” / “Velocity”: centered on the frame, mix-blend-mode: difference, white so it inverts on the film. Desktop size about clamp(6.5rem, 17.5vw, 17.5rem). Keep it off buttons and readable. Do not cover the can. - Second-video headlines use the same blend treatment, about clamp(4.5rem, 7.6vw, 8.4rem). The blend must not sit inside a parent that creates a stacking context. No z-index or opacity on an ancestor of those headlines, or the inversion will not reach the film. HERO, BEFORE THE PAGE UNLOCKS - Video One fills the viewport, object-fit: cover, object-position center, no distortion, no letterboxing. The can stays centered and fully readable. - Sample the light studio color from the outer corners of Video One’s first frame. Paint that exact color on the hero, the video wrapper, the sticky container, and any loader behind the video. - Show the first frame. Never a black, empty, or flashing frame. Use a poster still of the opening frame. - Both videos are muted and playsInline, with no native controls. Preload both. A small numeric loader is allowed until they can play. - Centered nav: CONCEPT, MACHINE, MOTION, INDEX. Shift it so it is not sitting on the middle of the can. Brand mark “APEX / 01” and a Sound off / Sound on toggle. Do not show “Interactive motorsport study.” - Do not show “Enter or space,” “Click to release,” “Input energy,” “Release,” “Motion,” or “Two films / one continuous transformation.” - The only written prompt is “Click to enter,” bottom center, during idle and while Video One is playing. - Custom cursor: while the hero is idle and the pointer is fine, the cursor is a circular PLAY mark (light disc, thin red ring, the word PLAY, hotspot at the center) with a pointer fallback. It must stay visible the whole time the pointer is over the idle hero, including over the nav and the enter button. Never set cursor: none unless that PLAY cursor is actually showing. Hide it after the intro is released, and on touch. - Bottom right: a small mono timeline, “000”. It follows Video One only. It stays at 000 until that film is playing, counts with currentTime / duration, and lands on 100 when Video One ends. It stays at 100 during the scroll film. It is not a giant 000, and there is no frame counter beside it. TITLE SWAP - The hero word is PRESSURE. - About 1.15 seconds into Video One, crossfade and lift it to VELOCITY with a smoothstep ease over about 0.7s. No glitch, skew, or clip-path distortion. - After the film ends, the word stays VELOCITY until replay. VIDEO MACHINE Idle: show Video One’s first frame. Clicking the picture, or pressing Enter or Space when focus is not already on a control, plays Video One from the start. It plays once. If the browser blocks playback with sound, retry muted. Both films start muted. The sound toggle unmutes them. “Click to enter” does not play Video One. It seeks Video One to its last safe frame, about 0.08s before the end, and unlocks the page. Video Two is still on its first frame. Video Two never plays for the user. On the first click, decode its first frame, pause it, and keep it invisible. Drive it only by setting currentTime from scroll. Until the intro is finished or skipped, the document does not scroll and the film section is exactly one viewport tall. After unlock, the section is 350vh with a sticky 100dvh stage. Map scroll through that runway to p = 0–1. Do not capture or hijack the wheel. Use the browser’s normal scroll. p 0.00–0.08 is the crossfade. Video One remains visible underneath. Video Two’s opacity goes from 0 to 1. Keep a still of Video Two’s first frame on top of that video until it has actually painted a frame, then hide the still. currentTime stays at 0.04s. This is what stops a black frame between the two films. p 0.08–0.92 scrubs Video Two. Map that range onto currentTime from 0.04s to duration minus 0.06s, in both directions. If duration is not known yet, use 4.6 seconds. Set currentTime directly on the element inside requestAnimationFrame. If a seek is already running, keep only the latest requested time. Ignore seeks closer than about 0.04s to the current frame. The picture must stop the moment scrolling stops. p 0.92–1.00 holds the final frame. The second-video overlay fades in across p 0.00–0.08. It must not appear just because Video One has ended while the scroll position is still 0. The hero layout, including the centered PRESSURE / VELOCITY title, stays until the user actually scrolls. With prefers-reduced-motion, replace the crossfade with one step at the halfway point of that first 8%. SCROLL-FILM OVERLAY Once the overlay is in, Video Two is the full-bleed background. Remove thick rules, heavy borders, and any small corner line. No vertical progress slider on the left. Keep every label off the car: - Stage number and timestamp, top left. - Headline, lower left, difference-blended so the white type stays readable on the bright studio frames and the dark racing frames. - Headlines follow Video Two’s own scrub progress, called local, where 0 is the first safe frame and 1 is the last safe frame. Stored Energy while local is below 0.28. Controlled Release until 0.62. Full Velocity after that. “Motion is the interface.” appears only while p is in the final hold. - Fade and slide each phrase. Do not swap them instantly. - Compact tech, lower right: Frame, Scroll, Films 02, Rate 30. - Thin white hairlines and a few small grid ticks. White and muted gray type. Blue and yellow only as small accents. - On the final hold, show “Replay sequence” and “Continue exploring.” The buttons use currentColor and sit with a little space above the bottom edge. - A faint “Scroll to accelerate” line may show at the start of the scrub and fade out. It is not a second title. - Pause all video work when the stage is off screen. Do not update React state on every scroll frame. EDITORIAL, AFTER THE FILM Do not leave a white navigation strip or a blank gap between the film and the next section. The sections below are inert until the page is unlocked. 01 — The sequence. Full-bleed black. Left and right padding clamp(1.25rem, 4vw, 3rem), the same inset as the index. Title the same size as the film headlines, forced onto two lines, each line nowrap: FROM STORED ENERGY TO FULL VELOCITY. Lede: “A compressed object becomes a machine, then the machine becomes motion. Every stage responds to a different human input.” Three steps: 01 Click — Activate the transformation. 02 Scroll — Control every frame. 03 Release — Enter full velocity. 02 — Interaction index. White page and white section. No thick red rules. Desktop: pin the section while vertical scrolling moves a horizontal card track from right to left. Release the pin once the last card is fully visible. Drive the track with requestAnimationFrame and a direct transform. Do not update React state every frame. Mobile: do not pin. Native horizontal swipe with scroll snap. Label above the cards: “01 / 04 — DRAG OR SCROLL”. Four large square-corner cards, generous padding, thin borders, no shadows, no glass. Backgrounds alternate black, off-white, deep blue #2f6dff, and muted silver. Each card may use a cropped still from these films. - 02 / Connected films — Two separate videos become one continuous visual sequence. - 01 / Transformation — The experience moves from object to machine without breaking the story. - 100% / Scroll controlled — Every movement through the second film responds directly to the user. - 00 / Automatic playback — The second video only moves when the user scrolls. 03 — Visual system. A horizontal strip of four stills taken from the uploaded videos. Captions: OBJECT 01, TRANSFORMATION 02, MACHINE 03, MOTION 04. 04 — Direction. Footer. No photograph. Solid #2f6dff, edge to edge, no cream gutters on the left or right. Type only. Balanced space above and below the text. Inner padding so the type is not sliced by the viewport. Kicker: 04 — DIRECTION Headline, Inter Tight 600, letter-spacing -0.075em: ENERGY NEEDS DIRECTION. Lede: An interactive concept exploring how cinematic footage can become the interface itself. Button: REPLAY THE EXPERIENCE. White fill, #2f6dff text. Hover: transparent, white text, white border. Fine print: UNOFFICIAL EXPERIMENTAL CONCEPT PROJECT. CREATED FOR VISUAL EXPLORATION. REPLAY AND NAVIGATION Replay returns to the idle hero, scroll at the top, title back to Pressure, Video Two hidden, timeline back to 000, and the page locked again. CONCEPT jumps to the sequence. MACHINE jumps to the visual system. MOTION returns to the top. INDEX jumps to the card section. If the page is still locked, choosing any section except Motion first finishes the intro, then jumps. QUALITY BAR - Video One starts only from a click on the picture or from the keyboard. “Click to enter” only skips. - Video Two stays locked until Video One ends or the intro is skipped. - Video Two scrubs both directions and stops when scrolling stops. - The handoff is a crossfade, and it never flashes black. - The films stay the dominant image. Text never covers the can or the car. - Desktop, tablet, and mobile. On small screens, cover-crop both videos, move the oversized type off the subject, and let touch scrolling scrub Video Two. Large tap targets. Fewer decorative ticks. - Visible focus states. - Respect prefers-reduced-motion.

Keep the hero layout unchanged when the first video ends. Only begin transitioning to the second layout after the user starts scrolling down. Also remove the small line in the top-left corner.

Match the hero section’s background color exactly to the light studio background inside the first video. Sample the color from the outer corners of the video’s opening frame and apply it to the hero section, video wrapper, sticky container, and loading state. Remove every gradient, border, shadow, overlay, or transition around the video. Use object-fit: contain and preserve the original aspect ratio. The video must feel embedded directly into one continuous background with no visible rectangle.

Rebuild the second video’s scroll logic for smooth frame-by-frame playback. Preload Video Two before unlocking the scroll interaction. Keep it paused at all times and map the sticky section’s scroll progress directly to currentTime. Use one requestAnimationFrame loop. Store scroll progress, target time, and video references outside React state. Update currentTime directly on the video element at most once per animation frame. Scrolling down moves forward, scrolling up reverses, and stopping holds the current frame. Pause all processing outside the viewport. Do not repeatedly call play and pause, create new listeners on every wheel event, or re-render the component on every frame.