--- name: knocx-reconstruction description: Recreate the KnocX cinematic website from supplied screenshots, videos, and frame assets with pixel-accurate layout, frame-by-frame scroll animation, responsive navigation, and visual verification. Use when rebuilding this design in Astro, React, Next.js, or another web stack with Claude, GPT, or any coding model. --- # KnocX: pixel-accurate reconstruction prompt Use this document as the full implementation brief. Build the website, do not only describe a plan. Treat the supplied screenshots and videos as the source of truth. Do not invent a different visual direction, replace the frame sequences with a normal video background, or claim pixel accuracy without checking the rendered result. ## Objective Recreate a cinematic editorial website called **KnocX**. Its narrative moves from ancient knowledge to interpretation, creative systems, transformation, and cinema. The user’s scroll is the playback head for the story: every scroll position selects a frame, and the page changes chapter only after the previous frame sequence has completed. The visual balance is: - 80% visual storytelling - 15% typography - 5% interface and data Use large, quiet compositions, restrained copy, warm editorial color, dark cinematic imagery, rounded panels, and precise motion. Do not put explanatory text on every frame. ## Inputs and asset rules First inspect every supplied asset before writing the UI: 1. Inspect the reference screenshots at their native dimensions. 2. Inspect the duration, frame rate, dimensions, and aspect ratio of every video. 3. Use the supplied images and extracted frames as-is. Do not generate substitute art when the real asset exists. 4. Preserve the original crop and subject placement. A frame must not jump, stretch, or change focal point as the canvas resizes. 5. Keep frame numbering zero-padded and deterministic. Expected sequences for this project: ```text public/hero-frames-2k/frame-001.webp ... frame-360.webp public/origin-frames-2k/frame-001.webp ... frame-360.webp ``` The hero sequence is the 2K version of `Video 10 (3).mp4`. The Origin sequence is extracted from `Back to the Origin.mp4`. Both sequences contain exactly 360 frames. If the videos are supplied instead of frames, extract exactly 360 frames before implementing the scroll controller. Do not silently reduce the count. Example extraction command when FFmpeg is available: ```bash ffmpeg -i "Video 10 (3).mp4" -frames:v 360 -c:v libwebp -q:v 78 -compression_level 6 public/hero-frames-2k/frame-%03d.webp ffmpeg -i "Back to the Origin.mp4" -frames:v 360 -c:v libwebp -q:v 78 -compression_level 6 public/origin-frames-2k/frame-%03d.webp ``` Do not upscale a source video. If WebP is unsupported in the chosen pipeline, use PNG or JPEG while preserving the source dimensions and frame order. ## Required stack Use: - Astro for the page and component structure. - Tailwind CSS for utility layout where useful, with a small global stylesheet for exact art direction. - GSAP and `ScrollTrigger` for scrubbed frame playback and section transitions. - Lenis or an equivalent smooth-scroll layer only if it does not interfere with native scroll, keyboard navigation, or `ScrollTrigger` measurements. - A small WebGL fragment shader for the loader’s moving grain, scanlines, distortion, and warm light. Provide a CSS fallback when WebGL is unavailable. Use framework-neutral browser code where possible. The implementation must still work when JavaScript is disabled enough to show the content structure, and it must respect `prefers-reduced-motion`. ## Page geometry Use the supplied screenshot proportions as the desktop reference. Validate at 1280×720 and 1440×900, then make the layout responsive. - Page background: quiet warm white/off-white. - Main panels: rounded corners, approximately 14px on desktop. - Desktop page inset: approximately 7px from the viewport edges. - The main content occupies the full available width when the right navigation is hidden. - The right navigation is approximately 266px wide on desktop with a 7px right/top/bottom inset. - Never leave an empty sticky column after the navigation retracts. - The hero and Origin visual panels are viewport-height panels; their scroll containers are several viewport-heights tall so the frame sequence has room to play. - Use `100svh`, not only `100vh`, so mobile browser chrome does not clip the final composition. Use CSS variables so the exact dimensions can be tuned without restructuring the page: ```css :root { --page-inset: 7px; --nav-width: 266px; --panel-radius: 14px; --ink: #10202a; --paper: #f5f1eb; --sand: #e1d2c8; --origin-pale: #f1e1d6; --sage: #b7c9bf; --archive: #263b22; } ``` ## Brand and typography Change all old branding to **KnocX**. Do not leave `SEASATS`, `Ocean Autonomy`, `Capabilities`, `Past Missions`, `Products`, or `Explore Products` in the rendered page. - Place `KnocX` at the upper-left of the hero in a bright, compact mark. - Use a high-contrast editorial serif for major statements. If the exact font is not supplied, choose the closest available high-contrast display serif and tune size, tracking, line-height, and width by screenshot comparison. - Use a restrained monospace or narrow grotesk for metadata, frame counts, labels, and section indices. - Keep display text uppercase where shown below. - Use intentional line breaks. Do not allow the browser to reflow the hero statements into arbitrary lines. - Do not over-bold the interface. The image and the display type carry the page. ## Global navigation ### Right chapter navigation Build a rounded vertical navigation panel with these exact labels and order: ```text Home 01 / ORIGIN 02 / PROCESS 03 / MISSIONS 04 / SYSTEMS 05 / ARCHIVE ``` Use these reference colors: | Row | Background | Text | |---|---|---| | Home | `#e1d2c8` | dark ink | | 01 / ORIGIN | `#f1e1d6` | dark ink | | 02 / PROCESS | `#e1d2c8` | dark ink | | 03 / MISSIONS | `#b7c9bf` | dark ink | | 04 / SYSTEMS | `#b7c9bf` | dark ink | | 05 / ARCHIVE | `#263b22` | white | On desktop, make each row large and evenly balanced inside the viewport-height panel. Add thin, low-contrast separators. Clicking a row scrolls to that chapter and updates the URL hash. When the user scrolls, retract the navigation smoothly. The content must expand to the full viewport with no leftover margin or sticky offset. The navigation must not automatically pop back in merely because scrolling stopped or a section changed. Reveal it only when the pointer enters a narrow edge hit area on the navigation side; keep it hidden otherwise. Animate the reveal and retract with a calm 350–600ms ease. On mobile, replace the full-height panel with a compact accessible menu or a slim chapter control. Do not allow the desktop navigation to cover the story. ### Left frame rail Keep a compact frame rail visible on the left while scrolling. It is a visual index of the current story, not a second full navigation column. Desktop reference: - approximately 132px wide - centered vertically - one current preview around 90px tall - six thumbnail buttons around 42px tall - 4–7px gaps - rounded corners and a translucent dark treatment over the image - small metadata labels at the bottom of each thumbnail Use these rail labels: ```text 00 / HOME 01 / ORIGIN 02 / PROCESS 03 / MISSIONS 04 / SYSTEMS 05 / ARCHIVE ``` Show the active sequence and frame number in the current preview. As the scroll enters a new chapter, update the current preview, active label, and frame source. Use the Origin frames for the Origin preview when available; use the closest representative frame from the relevant sequence for other chapters. The rail must stay small enough that it never obscures the hero copy or content. Add a slim section-progress indicator near the rail. It must communicate section-by-section movement, not act like a generic browser scrollbar. Update the active chapter as the scroll crosses each chapter boundary. ## Loader Create a hero-derived loader before the page is revealed. It must feel like the first shot of the film, not a spinner. Required behavior: - Full viewport, dark cinematic background. - Use the first hero frame as a visual anchor. - Show `KnocX` and a restrained progress/frame readout. - Animate for roughly 4–5 seconds on a normal connection so the transition has time to breathe. - Include subtle WebGL motion: film grain, scanlines, a moving horizon/wave, warm light distortion, and a restrained vignette. - Add staged entrance of the preview frame, logo, and metadata. - Exit with a crisp clip-path or wipe transition into the first hero frame. - Do not blur the logo, loader text, or final `ENTER` control. - Do not leave the document permanently locked if an asset fails. Resolve the loader after a safe timeout and keep the first available frame visible. - In reduced-motion mode, shorten the loader and remove shader motion while preserving the visual hierarchy. ## Hero: section 00 / HOME Create a pinned canvas frame sequence. The frame index must be driven by scroll progress: ```js const frame = Math.round(progress * 359); ``` Use a cover-fit draw routine that accounts for device pixel ratio, canvas resizing, and source aspect ratio. Keep the canvas stable while text and overlays change independently. Preload the first frame immediately, then preload the rest in a controlled way. Avoid visible loading gaps and avoid decoding all frames on every scroll event. Give the hero enough scroll distance for the complete narrative. A reliable starting point is a scroll container around 5–6 viewport-heights tall with a sticky visual panel that is one viewport high. Hold the final frame for a short end pad before entering Origin so the last story beat is fully readable. The last frame must never be clipped by the next section. ### Hero narrative timing Map the 360 frames and the major copy to these approximate ranges. Interpolate within each range; do not force every frame to display text. #### 0–15% · KNOWLEDGE Visual: begin with the three marble scholars, books, astronomy, mathematics, and research. Move slowly through the scholars. They should feel as if they are studying something beyond the frame. ```text KNOWLEDGE IS WHERE EVERYTHING BEGINS. ``` Metadata: ```text ARCHIVES / SCIENCE / CULTURE / HUMAN THOUGHT ``` #### 15–30% · THE QUESTION Visual: make the laptop the focal point and move closer. Let the old-world environment begin interacting with the modern machine. ```text BUT KNOWLEDGE HAS ALWAYS WAITED TO BE INTERPRETED. ``` Then reveal: ```text WHAT IF IT COULD BECOME SOMETHING ELSE? ``` #### 30–45% · THE TRANSFORMATION This is the most visually interesting frame range. Let books become information, diagrams become patterns, faces become data, and geometry become visual language. Keep the marble scholars physically consistent while their environment transforms. ```text WE DON'T JUST GENERATE. WE TRANSLATE. ``` Reveal this sequence one step at a time, never all at once: ```text KNOWLEDGE ↓ CONTEXT ↓ IMAGINATION ↓ IMAGE ``` #### 45–60% · THE MACHINE Make the computational layer more visible. Vision-analysis overlays may become more prominent, but they must remain elegant and secondary to the imagery. Gradually remove the laptop/interface as the system becomes cinematic rather than technical. ```text A NEW CREATIVE ENGINE. ``` Then reveal: ```text RESEARCH + REASONING + GENERATIVE SYSTEMS + ART DIRECTION ``` #### 60–75% · CINEMA Transition the ancient scholar into the cinema statue. Let the environment progress through: ```text LIBRARY → LABORATORY → STUDIO → CINEMA ``` Introduce, in order, the 3D glasses, popcorn, and cinema seats. The glasses appearing should be the final transformation detail. ```text UNTIL KNOWLEDGE BECOMES CINEMA. ``` #### 75–90% · THE EXPERIENCE Stop explaining. Let the final cinema composition breathe with slow camera movement and almost no copy. ```text FROM KNOWLEDGE TO CINEMA. ``` Then, near the lower part of the composition: ```text EXPLORE THE SYSTEM ↓ ``` #### 90–100% · ENTER Darken the cinema. Brighten the screen in front of the statue. Make the screen fill the viewport and use it as the transition into the site content. Reveal only at the end: ```text 01 / ORIGIN 02 / PROCESS 03 / MISSIONS 04 / SYSTEMS 05 / ARCHIVE ENTER → ``` Do not render `EXPLORE PRODUCTS`. If the final action is present, use only the minimal `ENTER →` transition control and keep it hidden until the final frames. ## Origin: section 01 / ORIGIN Use the 360 frames from `origin-frames-2k` as a second scroll-controlled canvas sequence. The visual panel must be viewport height, sticky during the sequence, and fully visible at its last frame before the following content begins. Recommended structure: ```text origin section ├─ sticky full-viewport canvas panel │ ├─ origin frame sequence │ ├─ dark cinematic wash │ └─ 01 / ORIGIN + FRAME nnn / 359 metadata └─ editorial details/content below the sequence ``` Use the same canvas renderer and preload strategy as the hero, but keep the two playheads independent. Scrolling from Home into Origin must switch the frame source cleanly; it must not flash the hero’s last frame or restart the wrong sequence. ## Remaining chapters Create the chapter structure and anchors even if their detailed frame sequences are supplied later: ```text #home #origin #process #missions #systems #archive ``` Use the same panel language, editorial serif, monospace metadata, rounded corners, and section progress treatment. Do not fill missing chapters with generic placeholder cards that contradict the visual system. Make the structure ready for future frame sequences. ## Animation rules - Use GSAP `ScrollTrigger` with a single source of truth for each playhead. - Use `scrub: true` or a short scrub value; never autoplay the story independently of scroll. - Use `ease: 'none'` for frame interpolation. Ease typography and overlays separately. - Update frame numbers from the same playhead that draws the canvas. - Debounce or schedule resize work; redraw the current frame after resize. - Refresh `ScrollTrigger` after fonts and image dimensions are ready. - Preserve scroll position during HMR when possible. - Use opacity, transform, clip-path, and color changes for overlays. Do not apply heavy blur to the primary image, logo, copy, or `ENTER` control. - Use `pointer-events: none` on decorative overlays so they cannot block navigation. - Keep the final frame visible long enough to read before the next section takes over. ## Responsive behavior Desktop and mobile are different compositions, not just scaled desktop: - Desktop: right chapter panel, compact left frame rail, large centered hero typography. - Tablet: narrower side navigation and reduced type scale; keep the canvas dominant. - Mobile: use a small top/bottom chapter control, compact frame strip, reduced copy width, and safe-area insets. Never let navigation or a thumbnail rail hide the focal subject. - Use `clamp()` for type and spacing, but preserve the designed line breaks at the main reference sizes. - Test portrait and landscape mobile viewports. ## Implementation sequence Follow this order: 1. Inventory assets and measure the reference screenshot. 2. Build the page shell, panel geometry, colors, and typography. 3. Build the hero canvas renderer and verify frame 001, midpoint, frame 359, and resizing. 4. Add the scroll timeline and end hold; verify the last frame is never clipped. 5. Add the narrative copy as independent beat overlays. 6. Add the compact left frame rail and section-progress indicator. 7. Add the retractable right navigation and full-width expansion behavior. 8. Add the Origin canvas sequence and transition between playheads. 9. Add the shader-based loader and its fallback. 10. Add reduced-motion and failure handling. 11. Run a production build and inspect the live page at reference viewports. Do not add unrelated features, authentication, analytics, CMS integration, or backend code. ## Pixel-accuracy verification loop After each major visual change: 1. Run the production build. 2. Open the page at 1280×720. 3. Wait for the loader to finish and capture a screenshot at the top. 4. Capture screenshots at hero progress 0%, 15%, 30%, 45%, 60%, 75%, 90%, and 100%. 5. Capture the first, middle, and last Origin frames. 6. Compare each screenshot with the supplied reference using an overlay or image-difference view. 7. Fix geometry first, then typography, then color/contrast, then timing. 8. Repeat at 1440×900 and a mobile viewport such as 390×844. Check specifically: - No horizontal overflow. - No clipped final hero copy. - No empty gap when the right navigation hides. - Right navigation returns only through its edge hover zone. - Left thumbnails remain compact and do not cover the story. - Frame number reaches exactly `359` at the end of each 360-frame sequence. - Frame source changes correctly at Origin. - `KnocX` and `ENTER →` remain crisp and readable. - No `EXPLORE PRODUCTS` text remains. - No console errors or failed frame requests. - Reduced-motion mode still shows the complete narrative. Do not report “pixel perfect” until the visual checks above have been performed. When handing off, report the files changed, the build command used, the viewports checked, and any remaining limitation caused by missing reference assets.