# Foxora Showcase Prompt Registry

Canonical registry: https://showcase.foxora.studio/

39 premium reconstruction prompts based on credited public references.

> Every visible entry has a free public implementation path and passed the 3D, web-app, or landing-page quality review. Check linked source terms before reusing code or bundled assets. Foxora preview media is for attribution and visual QA only.

## 01. Contact Cybernetic

**Type:** Motion · **Category:** Hero · **Source:** [MotionSites on MotionSites](https://motionsites.ai/?prompt=contact-cybernetic) · **Terms:** Source-marked free access · MotionSites terms apply

A real, responsive hero experience reconstructed from the MotionSites reference. Preserve the contact cybernetic motion-led digital experience domain and the observed animated composition.

# Recreate this reference faithfully: Contact Cybernetic

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `motion-contact-cybernetic` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, create the implementation required by the complete public source recipe. A single-file implementation is acceptable only when the recipe requests it and the same DOM, shader or media system, behavior, and responsive states are preserved.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/motion-contact-cybernetic/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/motion-contact-cybernetic.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/motion-contact-cybernetic.webp
- Original full-motion asset: https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(42).webp
- Original reference visual: https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(42).webp
- Exact source page: https://motionsites.ai/?prompt=contact-cybernetic
- Source collection / creator library: https://motionsites.ai/
- Source format: Animated WebP reference
- Creator credit: MotionSites
- Source terms recorded by Foxora: Source-marked free access · MotionSites terms apply

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: public source implementation prompt.
- Exact implementation authority: https://motionsites.ai/?prompt=contact-cybernetic
- Original listing and terms: https://motionsites.ai/?prompt=contact-cybernetic
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Follow the captured public implementation recipe verbatim for structure, source media, interaction, and responsive behavior, then use the Foxora animation only for visual comparison.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Mainframe®; we'd love to hear from you!; What sort of service?; Brand; Digital; Campaign; Other.
- Required layout zones: three-zone transparent navigation; left contact copy and service selector; right source-provided cybernetic film.
- Required working interactions: desktop horizontal video scrubbing; mobile muted autoplay; typewriter headline; multi-select service pills; responsive mobile menu.
- Responsive behavior: Use the public recipe's desktop overlay and tablet/mobile stacked media behavior exactly.
- Asset policy: Use the source-provided MP4 from the public prompt. Foxora WebP and poster URLs are QA-only.


### Authority acceptance checks

- The Mainframe interface is real DOM.
- The cybernetic source MP4 loads and scrubs.
- Service selection and mobile navigation work.
- No Foxora preview asset is rendered at the normal root.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "motion-contact-cybernetic",
  "kind": "Motion",
  "source": "https://motionsites.ai/?prompt=contact-cybernetic",
  "poster": "https://showcase.foxora.studio/thumbnails/motion-contact-cybernetic.webp",
  "motion": "https://showcase.foxora.studio/motion/motion-contact-cybernetic.webp",
  "originalVisual": "https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/hero%20sections/animated%20(42).webp",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 640,
    "height": 458,
    "aspectRatio": 1.3974
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-CB58D799

- Product domain: Contact Cybernetic motion-led digital experience.
- Required root artifact: A real, responsive hero experience reconstructed from the MotionSites reference.
- Root view: Contact Cybernetic interactive root view.
- Native Foxora capture: 640 × 458px, aspect ratio 1.3974.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the Contact Cybernetic preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: Contact Cybernetic; Hero; hero; interactive focal subject; semantic interface copy.
- Signature moments that must survive: Contact Cybernetic recognizable focal composition; hero typography, controls, spacing, and viewport occupancy; hero motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: contact; cybernetic; hero; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: Contact Cybernetic recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 640 × 458px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Public source implementation recipe — preserve these details

Build a modern, interactive contact hero with React, Tailwind CSS, and motion/react.

Use Inter from Google Fonts. The page is a light, editorial Mainframe® contact experience with a cybernetic film occupying the right side. It is not a dark sci-fi redesign and it is not a full-screen image viewer.

Page shell:
- Root classes: relative bg-white text-neutral-900 font-sans selection:bg-[#EAECE9] selection:text-[#1C2E1E] antialiased overflow-x-hidden flex flex-col lg:block lg:min-h-screen.
- Load the source-provided MP4 in a real muted, playsInline, preload="auto" <video>:
  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260601_110537_3a579fa0-7bbc-4d94-9d25-0e816c7840f5.mp4
- Video container: order-last lg:order-none relative lg:absolute lg:inset-0 lg:z-0 overflow-hidden pointer-events-none w-full aspect-square md:aspect-video lg:aspect-auto lg:h-full bg-neutral-50 lg:bg-transparent.
- Video classes: w-full h-full object-cover object-right lg:object-right-bottom.
- On desktop, scrub the video from horizontal mouse movement. Track previous X, map delta through (delta / innerWidth) * 0.8 * duration, clamp 0..duration, assign currentTime, and use seeked to continue toward the target frame.
- Below 1024px, disable scrubbing and autoplay the muted looping film. Respect prefers-reduced-motion by showing a composed still frame.

Real navigation:
- Fixed transparent header, top-0 inset-x-0 z-10 px-5 sm:px-8 py-4 sm:py-5, with three zones.
- Left wordmark: "Mainframe®" followed by "✱", black, medium weight, approximately 26px on desktop.
- Center links: "Labs, Studio, Openings, Shop" with comma separators, around 23px, with restrained opacity hover.
- Right underlined link: "Get in touch".
- Below md, replace center/right navigation with a 44px hamburger. Animate its three bars into an X and open a full-screen white/95 mobile menu. The button must update aria-expanded and the overlay links must close the menu.

Content:
- Add a relative z-10 content layer with a real <main>, not text baked into the film.
- Desktop content stays on the left while the cybernetic subject remains visible on the right. Use max-w-7xl, generous side insets, and vertically center the first fold.
- Implement useTypewriter(text, speed = 38, startDelay = 600), returning { displayed, done }.
- Type exactly "we'd love to\nhear from you!" in a 50–76px black, normal-weight headline with tight tracking, 1.08 line height, and a blinking 2px cursor while typing.
- Below it place: "Whether you have questions, feedback,\ndrop us a message and we'll get back to you as soon as possible." Use 18–21px #5A635A copy and preserve the two-line desktop wrap.

Working service selection:
- Heading: "What sort of service?"
- Helper: "Select all that apply"
- Render four real multi-select motion.button pills: Brand, Digital, Campaign, Other.
- Inactive: white, #1C2E1E text, #F1F3F1 border, subtle hover fill.
- Active: #1C2E1E background, white text, quiet shadow, and an animated check.
- Empty state: "Please click to select services above." at 50% opacity, italic, 12px.
- Selected state: animate in a #FAFBF9 bordered rounded-2xl banner reading "Ready to inquire about: [selected values]" and a working "Let's Go" action.

Responsive behavior:
- At 1023px and below, content becomes a white first block and the film follows as a real aspect-ratio media region; do not cover the form.
- At mobile width, use the square film crop, 20px side padding, readable headline wrapping, 44px minimum targets, no horizontal overflow, and the working mobile menu.
- Add reduced-motion handling, visible keyboard focus, semantic landmarks, labeled controls, deterministic initial state, and no autoplay sound.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 640 × 458px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement Contact Cybernetic recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement hero typography, controls, spacing, and viewport occupancy; hero motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Contact Cybernetic interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic contact cybernetic motion-led digital experience data for Contact Cybernetic, Hero, hero, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 640 × 458px and compare side by side with https://showcase.foxora.studio/thumbnails/motion-contact-cybernetic.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Contact Cybernetic, not merely the same genre.
- The root artifact is still a real, responsive hero experience reconstructed from the motionsites reference in the contact cybernetic motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: Contact Cybernetic recognizable focal composition; hero typography, controls, spacing, and viewport occupancy; hero motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 02. Flowstate

**Type:** Motion · **Category:** 3D Website · **Source:** [GetLayers on GetLayers](https://www.getlayers.ai/?tab=templates&layer=flowstate) · **Terms:** Free prompt · commercial use when extended

A real, responsive 3d website experience reconstructed from the MotionSites reference. A full-viewport deep-work landing page with a living WebGL fluid field, glass navigation, word-by-word hero reveals, and a working waitlist form.

# Recreate this reference faithfully: Flowstate

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `getlayers-flowstate` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, create the implementation required by the complete public source recipe. A single-file implementation is acceptable only when the recipe requests it and the same DOM, shader or media system, behavior, and responsive states are preserved.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/getlayers-flowstate/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-getlayers-flowstate.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/getlayers-flowstate.webp
- Original full-motion asset: https://storage.getlayers.ai/templates/flowstate-4c494408e1.mp4
- Original reference visual: https://storage.getlayers.ai/templates/flowstate-4c494408e1.webp
- Exact source page: https://www.getlayers.ai/?tab=templates&layer=flowstate
- Source collection / creator library: https://www.getlayers.ai/?tab=templates
- Source format: Single HTML · WebGL
- Creator credit: GetLayers
- Source terms recorded by Foxora: Free prompt · commercial use when extended

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: complete public source implementation prompt.
- Exact implementation authority: https://www.getlayers.ai/?tab=templates&layer=flowstate
- Original listing and terms: https://www.getlayers.ai/?tab=templates&layer=flowstate
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Follow the complete captured Flowstate source prompt verbatim, including the single-file delivery, exact Onest typography, adaptive rem grid, real semantic navigation and form, word reveals, and the full WebGL fluid solver. Do not replace the solver with a gradient, video, image, or generic blob.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Flowstate; Deep Work in a Distracted World; 10K+ already in flow; Join Waitlist.
- Required layout zones: full-viewport WebGL fluid canvas and radial scrim; top Flowstate navigation with glass center links; center badge, headline, support copy, and waitlist bar; bottom copyright line.
- Required working interactions: GPU fluid simulation with load burst and perpetual orbit; word-by-word spring reveal choreography; responsive glass waitlist interface.
- Responsive behavior: Preserve the exact rem scaling breakpoints, one-screen 100lvh composition, mobile nav reduction, pointer and touch fluid input, and deterministic reduced-motion frame from the source prompt.
- Asset policy: The fluid effect must be generated by the included MIT WebGL solver. GetLayers and Foxora preview files are QA-only and may not be embedded in the result.


### Authority acceptance checks

- The full supplied fluidSimulation implementation is present and starts with the specified burst.
- Flowstate copy, glass navigation, waitlist form, and word-by-word reveal timing match the public prompt.
- Real pointer or touch input and the invisible auto-cursor continuously stir the fluid.
- No source preview MP4, WebP, screenshot, iframe, or generic CSS gradient replaces the WebGL canvas.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "getlayers-flowstate",
  "kind": "Motion",
  "source": "https://www.getlayers.ai/?tab=templates&layer=flowstate",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-getlayers-flowstate.webp",
  "motion": "https://showcase.foxora.studio/motion/getlayers-flowstate.webp",
  "originalVisual": "https://storage.getlayers.ai/templates/flowstate-4c494408e1.webp",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-E6382611

- Product domain: Flowstate motion-led digital experience.
- Required root artifact: A real, responsive 3d website experience reconstructed from the MotionSites reference.
- Root view: Flowstate interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the Flowstate preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: Flowstate; 3D Website; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: Flowstate recognizable focal composition; 3d website typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: flowstate; website; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: Flowstate recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Public source implementation recipe — preserve these details

# Recreate this site as a single HTML file: Flowstate

You are an expert creative front-end developer. Produce a **single self-contained `index.html`**
that reproduces the project below **exactly** — same layout, visuals, motion, and interaction. Pure
HTML/CSS/JS in one file: no build step, no framework, no bundler. Use plain DOM and vanilla JS; the
only external dependency is the Google font (via a `<link>`) and the Lenis smooth-scroll library
(via a CDN ES-module import). Hardcode every value given here as a fixed constant. Rebuild each
component described below as a block of the one file.

## What it is

A full-viewport, immersive **dark hero** — a waitlist landing for a deep-work / focus app called
**Flowstate**. A full-bleed **WebGL fluid simulation** (oily "ink-in-water") fills the background:
it bursts into vivid color on load, then an invisible auto-cursor orbits the centre **forever**,
continuously painting bright cyan→blue→violet→magenta ink that swirls and dissipates; the real
mouse/touch also stirs the fluid. A soft radial scrim darkens the centre for text legibility. Over
it sits a centred column — a glass badge pill, a large heading revealed **word-by-word**, a
word-by-word sub-line, and a glass email "join waitlist" bar — plus a top nav (brand + glass link
pill + solid-white CTA pill) and a footer line. Everything **staggers in** on load with soft spring
reveals. The base is near-black `#04050c`; text is bright fog-white. Type is **Onest**.

There is only **one section** (the hero) and it fills `100lvh`. Smooth scrolling is wired via Lenis,
but the page is a single screen — scroll is effectively inert; keep Lenis for parity.

## Page shell & libraries

- **Font:** Onest from Google Fonts — `<link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500&display=swap" rel="stylesheet">`. Apply `font-family: "Onest", sans-serif` to the body. Weights used: 400 (body) and 500 (medium — brand, heading, buttons, badge).
- **Smooth scroll:** Lenis 1.3.x via importmap, e.g.
  ```html
  <script type="importmap">{ "imports": { "lenis": "https://unpkg.com/lenis@1.3.19/dist/lenis.mjs" } }</script>
  ```
  In a module script: `import Lenis from "lenis"; const lenis = new Lenis({ smoothWheel: true }); function raf(t){ lenis.raf(t); requestAnimationFrame(raf); } requestAnimationFrame(raf);`
- **CSS reset:** `* { margin:0; box-sizing:border-box; }`, remove default anchor/button styling, `body { background: var(--hero-base); color: var(--heading); overflow-x: hidden; }`.
- **Adaptive rem grid (important — the whole layout is rem-based and scales with the viewport).**
  Set the root font-size responsively so a rem-based layout stays proportional:
  ```css
  html { font-size: 16px; }
  @media (max-width: 1920px) { html { font-size: 0.833333vw; } } /* 16*100/1920 */
  @media (max-width: 1440px) { html { font-size: 1.111111vw; } } /* 16*100/1440 */
  @media (max-width: 1024px) { html { font-size: 1.5625vw;   } } /* 16*100/1024 */
  @media (max-width: 640px)  { html { font-size: 4.444444vw; } } /* 16*100/360  */
  ```
  All sizes below are given in rem so they follow this scale. Breakpoints in the markup use
  `sm` = **640px** (min-width) style rules; treat "sm:" values as the ≥640px branch, base values as <640px.

### CSS custom properties (colors — bake these in exactly)

```css
:root {
  --hero-base:            #04050c;   /* base behind the shader */
  --heading:             #eef0f6;   /* bright heading / input text */
  --body-muted:          #b9becf;   /* body copy, nav links, badge, footer */
  --on-media:            #ffffff;   /* brand text/icons sitting on the shader */
  --action-inverse:      #ffffff;   /* white pill button bg */
  --action-inverse-fg:   #2f2f33;   /* dark text on the white pill */
  --glass-fill:          rgba(255,255,255,0.08);
  --glass-border:        rgba(255,255,255,0.16);
  --scrim:               rgba(4,5,12,0.46);
  --scrim-strong:        rgba(4,5,12,0.68);
  --scrim-soft:          rgba(4,5,12,0.12);
  --duration-fast:       150ms;
  --ease-entrance:       cubic-bezier(0.2, 0, 0, 1);
}
```

## Layout & sections (in order)

Root: `<section>` — `position:relative; display:flex; flex-direction:column; align-items:center;
justify-content:center; min-height:100lvh; width:100vw; overflow:hidden; background:var(--hero-base);
text-align:center; padding: 0 1.25rem;` (≥640px: padding `0 2.5rem`).

**1. Fluid canvas (z-0).** `<canvas aria-hidden="true">` absolutely positioned `inset:0; width:100%;
height:100%; z-index:0; pointer-events:none;`. Runs the WebGL fluid engine (see "The WebGL scene").

**2. Scrim (z-1).** An `aria-hidden` div, `position:absolute; inset:0; z-index:1; pointer-events:none;`
with this exact background:
```css
background: radial-gradient(115% 95% at 50% 46%,
  var(--scrim-strong) 0%, var(--scrim-strong) 24%, var(--scrim) 52%, var(--scrim-soft) 100%);
```

**3. Top nav (`<header>`, z-20).** `position:absolute; inset-inline:0; top:0; display:flex;
align-items:center; justify-content:space-between; padding:1.25rem;` (≥640px `padding:1.75rem 2.5rem`).
Reveals as the first stagger step (see reveals).
- **Left — brand link** to `/`: `display:flex; align-items:center; gap:0.6rem; font-weight:500;
  font-size:1.15rem` (≥640px `1.375rem`); color `var(--on-media)`; `letter-spacing:-0.01em`. Contains:
  - **Brand glyph** (inline SVG, `1.35rem` square, ≥640px `1.5rem`, `stroke:currentColor`) — two
    interleaving flow lines echoing the fluid:
    ```html
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M2.5 9c2.5 0 2.5 4.2 5 4.2S10 9 12 9s2.5 4.2 5 4.2S19.5 9 21.5 9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
      <path d="M2.5 15c2.5 0 2.5 4.2 5 4.2S10 15 12 15s2.5 4.2 5 4.2S19.5 15 21.5 15" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" opacity="0.5"/>
    </svg>
    ```
  - the word **Flowstate**.
- **Center — glass link pill** (hidden below 640px; shown ≥640px as `display:flex`):
  `position:absolute; left:50%; transform:translateX(-50%); height:3rem; align-items:center;
  gap:2.25rem; border-radius:9999px; border:1px solid var(--glass-border); background:var(--glass-fill);
  padding:0 1.75rem; backdrop-filter:blur(12px);`. Links (font-size `0.95rem`, color `var(--body-muted)`,
  hover → `var(--heading)`, `transition:color var(--duration-fast) var(--ease-entrance)`,
  `white-space:nowrap`): **How it works?** (`#how-it-works`), **Pricing** (`#pricing`),
  **Products** (`#products`), **Blog** (`#blog`).
- **Right — CTA pill button** (the shared white pill, see below) labeled **Get Started**, href `#get-started`.

**4. Center column (z-10).** `position:relative; z-index:10; display:flex; flex-direction:column;
align-items:center; width:100%; max-width:22rem;` (≥640px `40rem`, ≥1024px `52rem`). Contains, in order:
  - **Badge pill** (`<p>`): `display:inline-flex; align-items:center; border-radius:9999px;
    border:1px solid var(--glass-border); background:var(--glass-fill); padding:0.4rem 0.875rem;
    font-size:0.72rem` (≥640px `0.8rem`); color `var(--body-muted)`; `backdrop-filter:blur(12px);`.
    Text: **10K+ already in flow**.
  - **Heading** (`<h1>`) — text **"Deep Work in a Distracted World"**, revealed **word-by-word**
    (see reveals). `margin-top:1.25rem` (≥640px `1.75rem`); `max-width:20rem` (≥640px `34rem`,
    ≥1024px `46rem`); `font-size:2rem` (≥640px `3.5rem`, ≥1024px `5rem`); `font-weight:500;
    line-height:1.1; letter-spacing:-0.02em; color:var(--heading); text-align:center;`.
  - **Sub-line** (`<p>`) — text **"Cut through the noise, reclaim your attention, and do work that
    truly matters."**, revealed word-by-word. `margin-top:1rem` (≥640px `1.25rem`); `max-width:20rem`
    (≥640px `34rem`, ≥1024px `none`); `font-size:1rem` (≥640px `1.1rem`, ≥1024px `1.2rem`);
    `line-height:1.5; color:var(--body-muted);`.
  - **Waitlist form** (`margin-top:1.75rem`, ≥640px `2.5rem`; `display:flex; justify-content:center;
    width:100%`). A `<form>` `width:37rem; max-width:100%`. Inside, a glass bar:
    `display:flex; align-items:center; height:3.5rem` (≥640px `4rem`); `border-radius:9999px;
    border:1px solid var(--glass-border); background:var(--glass-fill); backdrop-filter:blur(12px);
    box-shadow:0 1px 2px rgba(0,0,0,.05); padding-left:1.25rem; padding-right:0.35rem` (≥640px
    `pl:1.5rem; pr:0.4rem`). Contains an `<input type="email" required placeholder="Enter your email">`
    (`flex:1; min-width:0; height:100%; background:transparent; color:var(--heading); font-size:0.95rem`
    (≥640px `1.15rem`); placeholder color `var(--body-muted)`; no outline) and a white **Join Waitlist**
    submit pill. On submit: `preventDefault()`, no backend (no-op).

**5. Footer (`<footer>`, z-20).** `position:absolute; inset-inline:0; bottom:0; display:flex;
justify-content:center; padding:1.25rem` (≥640px `1.5rem 2.5rem`); `font-size:0.72rem` (≥640px `0.8rem`);
color `var(--body-muted)`. Text: **© 2026 Flowstate — engineered for deep work.**

**Shared white "pill" button** (used by "Get Started" and "Join Waitlist"):
`display:inline-flex; align-items:center; justify-content:center; height:2.5rem` (≥640px `2.75rem`);
`border-radius:9999px; background:var(--action-inverse); padding:0 1.125rem` (≥640px `0 1.375rem`);
`font-size:0.85rem` (≥640px `0.95rem`); `font-weight:500; color:var(--action-inverse-fg);
box-shadow:0 1px 2px rgba(0,0,0,.05); transition:background var(--duration-fast) var(--ease-entrance);`
hover → background `rgba(255,255,255,0.85)`; focus-visible → `outline:none; box-shadow:0 0 0 2px rgba(255,255,255,.7)`.

## The loader / reveal (the hero moment the preview captures)

There is **no separate loader overlay**. The "reveal" is the combination of (a) the fluid's **load
burst** and (b) the **staggered entrance** of the content — both fire on page load.

- **Fluid load burst:** the moment the engine starts it fires `multipleSplats(34)` (a dense burst of
  34 bright ink splats at random points) and queues **8** rapid follow-up waves
  (`splatStack.push(10 + random*10)`, drained one per frame). ~700ms later the invisible auto-cursor
  begins its perpetual orbit. This is baked into the engine below — do not change it.
- **Content stagger:** each block animates from `opacity:0` + a small translate to `opacity:1` +
  `translate:0`, with a soft spring (approximate a spring of tension 120 / friction 24 → ~700ms
  `cubic-bezier(0.2,0,0,1)` ease is a fine stand-in) and the following **delays after load** (ms):

  | Block | delay | from-transform | reveal style |
  |---|---|---|---|
  | Nav (header) | 150 | `translateY(-0.75rem)` | whole bar fades/slides in together |
  | Badge pill | 320 | `translateY(1.25rem)` | fades/slides up together |
  | Heading | 480 | per-word | **word-by-word**: each word `translateY(26px)→0`, `opacity 0→1`, **stagger 85ms**, per-word duration **720ms**, easing easeOutCubic (`1-(1-t)^3`) |
  | Sub-line | 1150 | per-word | **word-by-word**: each word `translateY(14px)→0`, `opacity 0→1`, **stagger 22ms**, per-word duration **600ms**, easeOutCubic |
  | Waitlist form | 1450 | `translateY(1.25rem)` | fades/slides up together |
  | Footer | 1650 | `translateY(1.25rem)` | fades/slides up together |

  For the word-by-word reveals, split the heading/sub-line text on spaces, wrap each word in an
  `inline-block` span (add a trailing space between words so wrapping is natural), and animate each
  span with its own `transition-delay = baseDelay + wordIndex * stagger`. Keep the line-height floor
  at 1.1 for the heading so descenders aren't clipped.

## The WebGL scene — the fluid ink simulation (this is the effect; reproduce verbatim)

Full-bleed GPU fluid solver (Pavel Dobryakov's WebGL fluid sim, MIT), tuned for an oily, marbled,
vivid-on-near-black look. Mount it on the background `<canvas>`, call `fluidSimulation(canvas)` once
after the DOM is ready. The engine owns its own `requestAnimationFrame` loop and reads pointer input
from **window** events (the canvas sits behind content with `pointer-events:none`, so it maps
`clientX/Y` into canvas space via `getBoundingClientRect()`). Paste the engine **verbatim** (it is
plain JS — the only edits from the original are: the tuned `config`, the strong load burst, the
`generateColor` cyan→magenta band, and the invisible auto-cursor that orbits the centre forever):

```js
function fluidSimulation(canvas) {
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;

    let config = {
        SIM_RESOLUTION: 200,
        DYE_RESOLUTION: 512,
        DENSITY_DISSIPATION: 0.958, // trails fade so idle swirls stay dynamic, not saturated
        VELOCITY_DISSIPATION: 0.96,
        PRESSURE_DISSIPATION: 0.8,
        PRESSURE_ITERATIONS: 20,
        CURL: 42,                   // extra swirl for the marbled look
        SPLAT_RADIUS: 0.22,         // fatter ink blobs
        SHADING: true,
        COLORFUL: true,
        PAUSED: false,
        BACK_COLOR: { r: 4, g: 5, b: 12 }, // deep near-black base (immersive)
        TRANSPARENT: false,
        BLOOM: false,
        BLOOM_ITERATIONS: 8,
        BLOOM_RESOLUTION: 256,
        BLOOM_INTENSITY: 0.8,
        BLOOM_THRESHOLD: 0.8,
        BLOOM_SOFT_KNEE: 0.7
    }

    function pointerPrototype() {
        this.id = -1;
        this.x = 0;
        this.y = 0;
        this.dx = 0;
        this.dy = 0;
        this.down = false;
        this.moved = false;
        this.color = [30, 0, 300];
    }

    let pointers = [];
    let splatStack = [];
    let bloomFramebuffers = [];
    pointers.push(new pointerPrototype());

    const { gl, ext } = getWebGLContext(canvas);

    if (isMobile())
        config.SHADING = false;
    if (!ext.supportLinearFiltering) {
        config.SHADING = false;
        config.BLOOM = false;
    }

    function getWebGLContext(canvas) {
        const params = { alpha: true, depth: false, stencil: false, antialias: false, preserveDrawingBuffer: false };

        let gl = canvas.getContext('webgl2', params);
        const isWebGL2 = !!gl;
        if (!isWebGL2)
            gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params);

        let halfFloat;
        let supportLinearFiltering;
        if (isWebGL2) {
            gl.getExtension('EXT_color_buffer_float');
            supportLinearFiltering = gl.getExtension('OES_texture_float_linear');
        } else {
            halfFloat = gl.getExtension('OES_texture_half_float');
            supportLinearFiltering = gl.getExtension('OES_texture_half_float_linear');
        }

        gl.clearColor(0.0, 0.0, 0.0, 1.0);

        const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;
        let formatRGBA;
        let formatRG;
        let formatR;

        if (isWebGL2) {
            formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType);
            formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType);
            formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType);
        }
        else {
            formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
            formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
            formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
        }

        return {
            gl,
            ext: {
                formatRGBA,
                formatRG,
                formatR,
                halfFloatTexType,
                supportLinearFiltering
            }
        };
    }

    function getSupportedFormat(gl, internalFormat, format, type) {
        if (!supportRenderTextureFormat(gl, internalFormat, format, type)) {
            switch (internalFormat) {
                case gl.R16F:
                    return getSupportedFormat(gl, gl.RG16F, gl.RG, type);
                case gl.RG16F:
                    return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type);
                default:
                    return null;
            }
        }

        return {
            internalFormat,
            format
        }
    }

    function supportRenderTextureFormat(gl, internalFormat, format, type) {
        let texture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null);

        let fbo = gl.createFramebuffer();
        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

        const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
        if (status != gl.FRAMEBUFFER_COMPLETE)
            return false;
        return true;
    }

    function clamp01(input) {
        return Math.min(Math.max(input, 0), 1);
    }

    function isMobile() {
        return /Mobi|Android/i.test(navigator.userAgent);
    }

    class GLProgram {
        constructor(vertexShader, fragmentShader) {
            this.uniforms = {};
            this.program = gl.createProgram();

            gl.attachShader(this.program, vertexShader);
            gl.attachShader(this.program, fragmentShader);
            gl.linkProgram(this.program);

            if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
                throw gl.getProgramInfoLog(this.program);

            const uniformCount = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);
            for (let i = 0; i < uniformCount; i++) {
                const uniformName = gl.getActiveUniform(this.program, i).name;
                this.uniforms[uniformName] = gl.getUniformLocation(this.program, uniformName);
            }
        }

        bind() {
            gl.useProgram(this.program);
        }
    }

    function compileShader(type, source) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
            throw gl.getShaderInfoLog(shader);

        return shader;
    };

    const baseVertexShader = compileShader(gl.VERTEX_SHADER, `
        precision highp float;
        attribute vec2 aPosition;
        varying vec2 vUv;
        varying vec2 vL;
        varying vec2 vR;
        varying vec2 vT;
        varying vec2 vB;
        uniform vec2 texelSize;
        void main () {
            vUv = aPosition * 0.5 + 0.5;
            vL = vUv - vec2(texelSize.x, 0.0);
            vR = vUv + vec2(texelSize.x, 0.0);
            vT = vUv + vec2(0.0, texelSize.y);
            vB = vUv - vec2(0.0, texelSize.y);
            gl_Position = vec4(aPosition, 0.0, 1.0);
        }
    `);

    const clearShader = compileShader(gl.FRAGMENT_SHADER, `
        precision mediump float;
        precision mediump sampler2D;
        varying highp vec2 vUv;
        uniform sampler2D uTexture;
        uniform float value;
        void main () {
            gl_FragColor = value * texture2D(uTexture, vUv);
        }
    `);

    const colorShader = compileShader(gl.FRAGMENT_SHADER, `
        precision mediump float;
        uniform vec4 color;
        void main () {
            gl_FragColor = color;
        }
    `);

    const backgroundShader = compileShader(gl.FRAGMENT_SHADER, `
        precision highp float;
        precision highp sampler2D;
        varying vec2 vUv;
        uniform sampler2D uTexture;
        uniform float aspectRatio;
        #define SCALE 25.0
        void main () {
            vec2 uv = floor(vUv * SCALE * vec2(aspectRatio, 1.0));
            float v = mod(uv.x + uv.y, 2.0);
            v = v * 0.1 + 0.8;
            gl_FragColor = vec4(vec3(v), 1.0);
        }
    `);

    const displayShader = compileShader(gl.FRAGMENT_SHADER, `
        precision highp float;
        precision highp sampler2D;
        varying vec2 vUv;
        uniform sampler2D uTexture;
        void main () {
            vec3 C = texture2D(uTexture, vUv).rgb;
            float a = max(C.r, max(C.g, C.b));
            gl_FragColor = vec4(C, a);
        }
    `);

    const displayBloomShader = compileShader(gl.FRAGMENT_SHADER, `
        precision highp float;
        precision highp sampler2D;
        varying vec2 vUv;
        uniform sampler2D uTexture;
        uniform sampler2D uBloom;
        uniform sampler2D uDithering;
        uniform vec2 ditherScale;
        void main () {
            vec3 C = texture2D(uTexture, vUv).rgb;
            vec3 bloom = texture2D(uBloom, vUv).rgb;
            vec3 noise = texture2D(uDithering, vUv * ditherScale).rgb;
            noise = noise * 2.0 - 1.0;
            bloom += noise / 800.0;
            bloom = pow(bloom.rgb, vec3(1.0 / 2.2));
            C += bloom;
            float a = max(C.r, max(C.g, C.b));
            gl_FragColor = vec4(C, a);
        }
    `);

    const displayShadingShader = compileShader(gl.FRAGMENT_SHADER, `
        precision highp float;
        precision highp sampler2D;
        varying vec2 vUv;
        varying vec2 vL;
        varying vec2 vR;
        varying vec2 vT;
        varying vec2 vB;
        uniform sampler2D uTexture;
        uniform vec2 texelSize;
        void main () {
            vec3 L = texture2D(uTexture, vL).rgb;
            vec3 R = texture2D(uTexture, vR).rgb;
            vec3 T = texture2D(uTexture, vT).rgb;
            vec3 B = texture2D(uTexture, vB).rgb;
            vec3 C = texture2D(uTexture, vUv).rgb;
            float dx = length(R) - length(L);
            float dy = length(T) - length(B);
            vec3 n = normalize(vec3(dx, dy, length(texelSize)));
            vec3 l = vec3(0.0, 0.0, 1.0);
            float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0);
            C.rgb *= diffuse;
            float a = max(C.r, max(C.g, C.b));
            gl_FragColor = vec4(C, a);
        }
    `);

    const displayBloomShadingShader = compileShader(gl.FRAGMENT_SHADER, `
        precision highp float;
        precision highp sampler2D;
        varying vec2 vUv;
        varying vec2 vL;
        varying vec2 vR;
        varying vec2 vT;
        varying vec2 vB;
        uniform sampler2D uTexture;
        uniform sampler2D uBloom;
        uniform sampler2D uDithering;
        uniform vec2 ditherScale;
        uniform vec2 texelSize;
        void main () {
            vec3 L = texture2D(uTexture, vL).rgb;
            vec3 R = texture2D(uTexture, vR).rgb;
            vec3 T = texture2D(uTexture, vT).rgb;
            vec3 B = texture2D(uTexture, vB).rgb;
            vec3 C = texture2D(uTexture, vUv).rgb;
            float dx = length(R) - length(L);
            float dy = length(T) - length(B);
            vec3 n = normalize(vec3(dx, dy, length(texelSize)));
            vec3 l = vec3(0.0, 0.0, 1.0);
            float diffuse = clamp(dot(n, l) + 0.7, 0.7, 1.0);
            C *= diffuse;
            vec3 bloom = texture2D(uBloom, vUv).rgb;
            vec3 noise = texture2D(uDithering, vUv * ditherScale).rgb;
            noise = noise * 2.0 - 1.0;
            bloom += noise / 800.0;
            bloom = pow(bloom.rgb, vec3(1.0 / 2.2));
            C += bloom;
            float a = max(C.r, max(C.g, C.b));
            gl_FragColor = vec4(C, a);
        }
    `);

    const bloomPrefilterShader = compileShader(gl.FRAGMENT_SHADER, `
        precision mediump float;
        precision mediump sampler2D;
        varying vec2 vUv;
        uniform sampler2D uTexture;
        uniform vec3 curve;
        uniform float threshold;
        void main () {
            vec3 c = texture2D(uTexture, vUv).rgb;
            float br = max(c.r, max(c.g, c.b));
            float rq = clamp(br - curve.x, 0.0, curve.y);
            rq = curve.z * rq * rq;
            c *= max(rq, br - threshold) / max(br, 0.0001);
            gl_FragColor = vec4(c, 0.0);
        }
    `);

    const bloomBlurShader = compileShader(gl.FRAGMENT_SHADER, `
        precision mediump float;
        precision mediump sampler2D;
        varying vec2 vL;
        varying vec2 vR;
        varying vec2 vT;
        varying vec2 vB;
        uniform sampler2D uTexture;
        void main () {
            vec4 sum = vec4(0.0);
            sum += texture2D(uTexture, vL);
            sum += texture2D(uTexture, vR);
            sum += texture2D(uTexture, vT);
            sum += texture2D(uTexture, vB);
            sum *= 0.25;
            gl_FragColor = sum;
        }
    `);

    const bloomFinalShader = compileShader(gl.FRAGMENT_SHADER, `
        precision mediump float;
        precision mediump sampler2D;
        varying vec2 vL;
        varying vec2 vR;
        varying vec2 vT;
        varying vec2 vB;
        uniform sampler2D uTexture;
        uniform float intensity;
        void main () {
            vec4 sum = vec4(0.0);
            sum += texture2D(uTexture, vL);
            sum += texture2D(uTexture, vR);
            sum += texture2D(uTexture, vT);
            sum += texture2D(uTexture, vB);
            sum *= 0.25;
            gl_FragColor = sum * intensity;
        }
    `);

    const splatShader = compileShader(gl.FRAGMENT_SHADER, `
        precision highp float;
        precision highp sampler2D;
        varying vec2 vUv;
        uniform sampler2D uTarget;
        uniform float aspectRatio;
        uniform vec3 color;
        uniform vec2 point;
        uniform float radius;
        void main () {
            vec2 p = vUv - point.xy;
            p.x *= aspectRatio;
            vec3 splat = exp(-dot(p, p) / radius) * color;
            vec3 base = texture2D(uTarget, vUv).xyz;
            gl_FragColor = vec4(base + splat, 1.0);
        }
    `);

    const advectionManualFilteringShader = compileShader(gl.FRAGMENT_SHADER, `
        precision highp float;
        precision highp sampler2D;
        varying vec2 vUv;
        uniform sampler2D uVelocity;
        uniform sampler2D uSource;
        uniform vec2 texelSize;
        uniform vec2 dyeTexelSize;
        uniform float dt;
        uniform float dissipation;
        vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) {
            vec2 st = uv / tsize - 0.5;
            vec2 iuv = floor(st);
            vec2 fuv = fract(st);
            vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize);
            vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize);
            vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize);
            vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize);
            return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y);
        }
        void main () {
            vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize;
            gl_FragColor = dissipation * bilerp(uSource, coord, dyeTexelSize);
            gl_FragColor.a = 1.0;
        }
    `);

    const advectionShader = compileShader(gl.FRAGMENT_SHADER, `
        precision highp float;
        precision highp sampler2D;
        varying vec2 vUv;
        uniform sampler2D uVelocity;
        uniform sampler2D uSource;
        uniform vec2 texelSize;
        uniform float dt;
        uniform float dissipation;
        void main () {
            vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
            gl_FragColor = dissipation * texture2D(uSource, coord);
            gl_FragColor.a = 1.0;
        }
    `);

    const divergenceShader = compileShader(gl.FRAGMENT_SHADER, `
        precision mediump float;
        precision mediump sampler2D;
        varying highp vec2 vUv;
        varying highp vec2 vL;
        varying highp vec2 vR;
        varying highp vec2 vT;
        varying highp vec2 vB;
        uniform sampler2D uVelocity;
        void main () {
            float L = texture2D(uVelocity, vL).x;
            float R = texture2D(uVelocity, vR).x;
            float T = texture2D(uVelocity, vT).y;
            float B = texture2D(uVelocity, vB).y;
            vec2 C = texture2D(uVelocity, vUv).xy;
            if (vL.x < 0.0) { L = -C.x; }
            if (vR.x > 1.0) { R = -C.x; }
            if (vT.y > 1.0) { T = -C.y; }
            if (vB.y < 0.0) { B = -C.y; }
            float div = 0.5 * (R - L + T - B);
            gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
        }
    `);

    const curlShader = compileShader(gl.FRAGMENT_SHADER, `
        precision mediump float;
        precision mediump sampler2D;
        varying highp vec2 vUv;
        varying highp vec2 vL;
        varying highp vec2 vR;
        varying highp vec2 vT;
        varying highp vec2 vB;
        uniform sampler2D uVelocity;
        void main () {
            float L = texture2D(uVelocity, vL).y;
            float R = texture2D(uVelocity, vR).y;
            float T = texture2D(uVelocity, vT).x;
            float B = texture2D(uVelocity, vB).x;
            float vorticity = R - L - T + B;
            gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0);
        }
    `);

    const vorticityShader = compileShader(gl.FRAGMENT_SHADER, `
        precision highp float;
        precision highp sampler2D;
        varying vec2 vUv;
        varying vec2 vL;
        varying vec2 vR;
        varying vec2 vT;
        varying vec2 vB;
        uniform sampler2D uVelocity;
        uniform sampler2D uCurl;
        uniform float curl;
        uniform float dt;
        void main () {
            float L = texture2D(uCurl, vL).x;
            float R = texture2D(uCurl, vR).x;
            float T = texture2D(uCurl, vT).x;
            float B = texture2D(uCurl, vB).x;
            float C = texture2D(uCurl, vUv).x;
            vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L));
            force /= length(force) + 0.0001;
            force *= curl * C;
            force.y *= -1.0;
            vec2 vel = texture2D(uVelocity, vUv).xy;
            gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);
        }
    `);

    const pressureShader = compileShader(gl.FRAGMENT_SHADER, `
        precision mediump float;
        precision mediump sampler2D;
        varying highp vec2 vUv;
        varying highp vec2 vL;
        varying highp vec2 vR;
        varying highp vec2 vT;
        varying highp vec2 vB;
        uniform sampler2D uPressure;
        uniform sampler2D uDivergence;
        vec2 boundary (vec2 uv) {
            return uv;
        }
        void main () {
            float L = texture2D(uPressure, boundary(vL)).x;
            float R = texture2D(uPressure, boundary(vR)).x;
            float T = texture2D(uPressure, boundary(vT)).x;
            float B = texture2D(uPressure, boundary(vB)).x;
            float C = texture2D(uPressure, vUv).x;
            float divergence = texture2D(uDivergence, vUv).x;
            float pressure = (L + R + B + T - divergence) * 0.25;
            gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
        }
    `);

    const gradientSubtractShader = compileShader(gl.FRAGMENT_SHADER, `
        precision mediump float;
        precision mediump sampler2D;
        varying highp vec2 vUv;
        varying highp vec2 vL;
        varying highp vec2 vR;
        varying highp vec2 vT;
        varying highp vec2 vB;
        uniform sampler2D uPressure;
        uniform sampler2D uVelocity;
        vec2 boundary (vec2 uv) {
            return uv;
        }
        void main () {
            float L = texture2D(uPressure, boundary(vL)).x;
            float R = texture2D(uPressure, boundary(vR)).x;
            float T = texture2D(uPressure, boundary(vT)).x;
            float B = texture2D(uPressure, boundary(vB)).x;
            vec2 velocity = texture2D(uVelocity, vUv).xy;
            velocity.xy -= vec2(R - L, T - B);
            gl_FragColor = vec4(velocity, 0.0, 1.0);
        }
    `);

    const blit = (() => {
        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW);
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(0);

        return (destination) => {
            gl.bindFramebuffer(gl.FRAMEBUFFER, destination);
            gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
        }
    })();

    let simWidth;
    let simHeight;
    let dyeWidth;
    let dyeHeight;
    let density;
    let velocity;
    let divergence;
    let curl;
    let pressure;
    let bloom;

    let ditheringTexture = createNoiseTexture(256);

    const clearProgram = new GLProgram(baseVertexShader, clearShader);
    const colorProgram = new GLProgram(baseVertexShader, colorShader);
    const backgroundProgram = new GLProgram(baseVertexShader, backgroundShader);
    const displayProgram = new GLProgram(baseVertexShader, displayShader);
    const displayBloomProgram = new GLProgram(baseVertexShader, displayBloomShader);
    const displayShadingProgram = new GLProgram(baseVertexShader, displayShadingShader);
    const displayBloomShadingProgram = new GLProgram(baseVertexShader, displayBloomShadingShader);
    const bloomPrefilterProgram = new GLProgram(baseVertexShader, bloomPrefilterShader);
    const bloomBlurProgram = new GLProgram(baseVertexShader, bloomBlurShader);
    const bloomFinalProgram = new GLProgram(baseVertexShader, bloomFinalShader);
    const splatProgram = new GLProgram(baseVertexShader, splatShader);
    const advectionProgram = new GLProgram(baseVertexShader, ext.supportLinearFiltering ? advectionShader : advectionManualFilteringShader);
    const divergenceProgram = new GLProgram(baseVertexShader, divergenceShader);
    const curlProgram = new GLProgram(baseVertexShader, curlShader);
    const vorticityProgram = new GLProgram(baseVertexShader, vorticityShader);
    const pressureProgram = new GLProgram(baseVertexShader, pressureShader);
    const gradienSubtractProgram = new GLProgram(baseVertexShader, gradientSubtractShader);

    function initFramebuffers() {
        let simRes = getResolution(config.SIM_RESOLUTION);
        let dyeRes = getResolution(config.DYE_RESOLUTION);

        simWidth = simRes.width;
        simHeight = simRes.height;
        dyeWidth = dyeRes.width;
        dyeHeight = dyeRes.height;

        const texType = ext.halfFloatTexType;
        const rgba = ext.formatRGBA;
        const rg = ext.formatRG;
        const r = ext.formatR;
        const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST;

        if (density == null)
            density = createDoubleFBO(dyeWidth, dyeHeight, rgba.internalFormat, rgba.format, texType, filtering);
        else
            density = resizeDoubleFBO(density, dyeWidth, dyeHeight, rgba.internalFormat, rgba.format, texType, filtering);

        if (velocity == null)
            velocity = createDoubleFBO(simWidth, simHeight, rg.internalFormat, rg.format, texType, filtering);
        else
            velocity = resizeDoubleFBO(velocity, simWidth, simHeight, rg.internalFormat, rg.format, texType, filtering);

        divergence = createFBO(simWidth, simHeight, r.internalFormat, r.format, texType, gl.NEAREST);
        curl = createFBO(simWidth, simHeight, r.internalFormat, r.format, texType, gl.NEAREST);
        pressure = createDoubleFBO(simWidth, simHeight, r.internalFormat, r.format, texType, gl.NEAREST);

        initBloomFramebuffers();
    }

    function initBloomFramebuffers() {
        let res = getResolution(config.BLOOM_RESOLUTION);

        const texType = ext.halfFloatTexType;
        const rgba = ext.formatRGBA;
        const filtering = ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST;

        bloom = createFBO(res.width, res.height, rgba.internalFormat, rgba.format, texType, filtering);

        bloomFramebuffers.length = 0;
        for (let i = 0; i < config.BLOOM_ITERATIONS; i++) {
            let width = res.width >> (i + 1);
            let height = res.height >> (i + 1);

            if (width < 2 || height < 2) break;

            let fbo = createFBO(width, height, rgba.internalFormat, rgba.format, texType, filtering);
            bloomFramebuffers.push(fbo);
        }
    }

    function createFBO(w, h, internalFormat, format, type, param) {
        gl.activeTexture(gl.TEXTURE0);
        let texture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);

        let fbo = gl.createFramebuffer();
        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
        gl.viewport(0, 0, w, h);
        gl.clear(gl.COLOR_BUFFER_BIT);

        return {
            texture,
            fbo,
            width: w,
            height: h,
            attach(id) {
                gl.activeTexture(gl.TEXTURE0 + id);
                gl.bindTexture(gl.TEXTURE_2D, texture);
                return id;
            }
        };
    }

    function createDoubleFBO(w, h, internalFormat, format, type, param) {
        let fbo1 = createFBO(w, h, internalFormat, format, type, param);
        let fbo2 = createFBO(w, h, internalFormat, format, type, param);

        return {
            get read() { return fbo1; },
            set read(value) { fbo1 = value; },
            get write() { return fbo2; },
            set write(value) { fbo2 = value; },
            swap() {
                let temp = fbo1;
                fbo1 = fbo2;
                fbo2 = temp;
            }
        }
    }

    function resizeFBO(target, w, h, internalFormat, format, type, param) {
        let newFBO = createFBO(w, h, internalFormat, format, type, param);
        clearProgram.bind();
        gl.uniform1i(clearProgram.uniforms.uTexture, target.attach(0));
        gl.uniform1f(clearProgram.uniforms.value, 1);
        blit(newFBO.fbo);
        return newFBO;
    }

    function resizeDoubleFBO(target, w, h, internalFormat, format, type, param) {
        target.read = resizeFBO(target.read, w, h, internalFormat, format, type, param);
        target.write = createFBO(w, h, internalFormat, format, type, param);
        return target;
    }

    // Procedural noise for dithering (replaces the external LDR texture).
    function createNoiseTexture(size) {
        const data = new Uint8Array(size * size * 3);
        for (let i = 0; i < data.length; i++)
            data[i] = Math.floor(Math.random() * 256);
        let texture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, size, size, 0, gl.RGB, gl.UNSIGNED_BYTE, data);
        return {
            texture,
            width: size,
            height: size,
            attach(id) {
                gl.activeTexture(gl.TEXTURE0 + id);
                gl.bindTexture(gl.TEXTURE_2D, texture);
                return id;
            }
        };
    }

    initFramebuffers();
    // Strong entrance: a dense burst plus several rapid follow-up waves
    // (drained one-per-frame by input() via splatStack).
    multipleSplats(34);
    for (let i = 0; i < 8; i++)
        splatStack.push(10 + parseInt(Math.random() * 10));

    let lastColorChangeTime = Date.now();
    let virtualSeeded = false;
    let orbitAngle = 0;
    let vPrevX = 0, vPrevY = 0;
    let virtualColor = null;
    let lastVColorTime = 0;
    const engineStart = Date.now();
    const ORBIT_RADIUS = 300;      // px — the auto-cursor circles the centre at this radius
    const ORBIT_SPEED = 0.026;     // rad/frame (~4 s per loop)
    const ORBIT_START_DELAY = 700; // ms after load before the auto-cursor begins (burst plays first)

    let rafHandle = 0;
    let destroyed = false;

    update();

    function update() {
        if (destroyed) return;
        resizeCanvas();
        driveVirtualPointer();
        input();
        if (!config.PAUSED)
            step(0.016);
        render(null);
        rafHandle = requestAnimationFrame(update);
    }

    // An invisible auto-cursor orbits the centre FOREVER, independent of the real
    // pointer, splatting bright ink along a gently breathing orbit. Starts a beat
    // after load so the burst plays first.
    function driveVirtualPointer() {
        if (Date.now() - engineStart < ORBIT_START_DELAY)
            return;
        const cx = canvas.width / 2;
        const cy = canvas.height / 2;
        const base = Math.min(ORBIT_RADIUS, canvas.width * 0.35, canvas.height * 0.35);
        const r = base * (0.72 + 0.28 * Math.sin(orbitAngle * 0.37));
        orbitAngle += ORBIT_SPEED;
        const x = cx + Math.cos(orbitAngle) * r;
        const y = cy + Math.sin(orbitAngle) * r;
        if (!virtualSeeded) {
            virtualSeeded = true;
            vPrevX = x;
            vPrevY = y;
            return;
        }
        if (!virtualColor || Date.now() - lastVColorTime > 120) {
            virtualColor = generateColor();
            virtualColor.r *= 3.2;
            virtualColor.g *= 3.2;
            virtualColor.b *= 3.2;
            lastVColorTime = Date.now();
        }
        const dx = (x - vPrevX) * 9.0;
        const dy = (y - vPrevY) * 9.0;
        vPrevX = x;
        vPrevY = y;
        splat(x, y, dx, dy, virtualColor);
    }

    function input() {
        if (splatStack.length > 0)
            multipleSplats(splatStack.pop());

        for (let i = 0; i < pointers.length; i++) {
            const p = pointers[i];
            if (p.moved) {
                splat(p.x, p.y, p.dx, p.dy, p.color);
                p.moved = false;
            }
        }

        if (!config.COLORFUL)
            return;

        if (lastColorChangeTime + 100 < Date.now()) {
            lastColorChangeTime = Date.now();
            for (let i = 0; i < pointers.length; i++) {
                const p = pointers[i];
                p.color = generateColor();
            }
        }
    }

    function step(dt) {
        gl.disable(gl.BLEND);
        gl.viewport(0, 0, simWidth, simHeight);

        curlProgram.bind();
        gl.uniform2f(curlProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
        gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read.attach(0));
        blit(curl.fbo);

        vorticityProgram.bind();
        gl.uniform2f(vorticityProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
        gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read.attach(0));
        gl.uniform1i(vorticityProgram.uniforms.uCurl, curl.attach(1));
        gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
        gl.uniform1f(vorticityProgram.uniforms.dt, dt);
        blit(velocity.write.fbo);
        velocity.swap();

        divergenceProgram.bind();
        gl.uniform2f(divergenceProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
        gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read.attach(0));
        blit(divergence.fbo);

        clearProgram.bind();
        gl.uniform1i(clearProgram.uniforms.uTexture, pressure.read.attach(0));
        gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE_DISSIPATION);
        blit(pressure.write.fbo);
        pressure.swap();

        pressureProgram.bind();
        gl.uniform2f(pressureProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
        gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence.attach(0));
        for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
            gl.uniform1i(pressureProgram.uniforms.uPressure, pressure.read.attach(1));
            blit(pressure.write.fbo);
            pressure.swap();
        }

        gradienSubtractProgram.bind();
        gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
        gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read.attach(0));
        gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read.attach(1));
        blit(velocity.write.fbo);
        velocity.swap();

        advectionProgram.bind();
        gl.uniform2f(advectionProgram.uniforms.texelSize, 1.0 / simWidth, 1.0 / simHeight);
        if (!ext.supportLinearFiltering)
            gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, 1.0 / simWidth, 1.0 / simHeight);
        let velocityId = velocity.read.attach(0);
        gl.uniform1i(advectionProgram.uniforms.uVelocity, velocityId);
        gl.uniform1i(advectionProgram.uniforms.uSource, velocityId);
        gl.uniform1f(advectionProgram.uniforms.dt, dt);
        gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION);
        blit(velocity.write.fbo);
        velocity.swap();

        gl.viewport(0, 0, dyeWidth, dyeHeight);

        if (!ext.supportLinearFiltering)
            gl.uniform2f(advectionProgram.uniforms.dyeTexelSize, 1.0 / dyeWidth, 1.0 / dyeHeight);
        gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read.attach(0));
        gl.uniform1i(advectionProgram.uniforms.uSource, density.read.attach(1));
        gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION);
        blit(density.write.fbo);
        density.swap();
    }

    function render(target) {
        if (config.BLOOM)
            applyBloom(density.read, bloom);

        if (target == null || !config.TRANSPARENT) {
            gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
            gl.enable(gl.BLEND);
        }
        else {
            gl.disable(gl.BLEND);
        }

        let width = target == null ? gl.drawingBufferWidth : dyeWidth;
        let height = target == null ? gl.drawingBufferHeight : dyeHeight;

        gl.viewport(0, 0, width, height);

        if (!config.TRANSPARENT) {
            colorProgram.bind();
            let bc = config.BACK_COLOR;
            gl.uniform4f(colorProgram.uniforms.color, bc.r / 255, bc.g / 255, bc.b / 255, 1);
            blit(target);
        }

        if (target == null && config.TRANSPARENT) {
            backgroundProgram.bind();
            gl.uniform1f(backgroundProgram.uniforms.aspectRatio, canvas.width / canvas.height);
            blit(null);
        }

        if (config.SHADING) {
            let program = config.BLOOM ? displayBloomShadingProgram : displayShadingProgram;
            program.bind();
            gl.uniform2f(program.uniforms.texelSize, 1.0 / width, 1.0 / height);
            gl.uniform1i(program.uniforms.uTexture, density.read.attach(0));
            if (config.BLOOM) {
                gl.uniform1i(program.uniforms.uBloom, bloom.attach(1));
                gl.uniform1i(program.uniforms.uDithering, ditheringTexture.attach(2));
                let scale = getTextureScale(ditheringTexture, width, height);
                gl.uniform2f(program.uniforms.ditherScale, scale.x, scale.y);
            }
        }
        else {
            let program = config.BLOOM ? displayBloomProgram : displayProgram;
            program.bind();
            gl.uniform1i(program.uniforms.uTexture, density.read.attach(0));
            if (config.BLOOM) {
                gl.uniform1i(program.uniforms.uBloom, bloom.attach(1));
                gl.uniform1i(program.uniforms.uDithering, ditheringTexture.attach(2));
                let scale = getTextureScale(ditheringTexture, width, height);
                gl.uniform2f(program.uniforms.ditherScale, scale.x, scale.y);
            }
        }

        blit(target);
    }

    function applyBloom(source, destination) {
        if (bloomFramebuffers.length < 2)
            return;

        let last = destination;

        gl.disable(gl.BLEND);
        bloomPrefilterProgram.bind();
        let knee = config.BLOOM_THRESHOLD * config.BLOOM_SOFT_KNEE + 0.0001;
        let curve0 = config.BLOOM_THRESHOLD - knee;
        let curve1 = knee * 2;
        let curve2 = 0.25 / knee;
        gl.uniform3f(bloomPrefilterProgram.uniforms.curve, curve0, curve1, curve2);
        gl.uniform1f(bloomPrefilterProgram.uniforms.threshold, config.BLOOM_THRESHOLD);
        gl.uniform1i(bloomPrefilterProgram.uniforms.uTexture, source.attach(0));
        gl.viewport(0, 0, last.width, last.height);
        blit(last.fbo);

        bloomBlurProgram.bind();
        for (let i = 0; i < bloomFramebuffers.length; i++) {
            let dest = bloomFramebuffers[i];
            gl.uniform2f(bloomBlurProgram.uniforms.texelSize, 1.0 / last.width, 1.0 / last.height);
            gl.uniform1i(bloomBlurProgram.uniforms.uTexture, last.attach(0));
            gl.viewport(0, 0, dest.width, dest.height);
            blit(dest.fbo);
            last = dest;
        }

        gl.blendFunc(gl.ONE, gl.ONE);
        gl.enable(gl.BLEND);

        for (let i = bloomFramebuffers.length - 2; i >= 0; i--) {
            let baseTex = bloomFramebuffers[i];
            gl.uniform2f(bloomBlurProgram.uniforms.texelSize, 1.0 / last.width, 1.0 / last.height);
            gl.uniform1i(bloomBlurProgram.uniforms.uTexture, last.attach(0));
            gl.viewport(0, 0, baseTex.width, baseTex.height);
            blit(baseTex.fbo);
            last = baseTex;
        }

        gl.disable(gl.BLEND);
        bloomFinalProgram.bind();
        gl.uniform2f(bloomFinalProgram.uniforms.texelSize, 1.0 / last.width, 1.0 / last.height);
        gl.uniform1i(bloomFinalProgram.uniforms.uTexture, last.attach(0));
        gl.uniform1f(bloomFinalProgram.uniforms.intensity, config.BLOOM_INTENSITY);
        gl.viewport(0, 0, destination.width, destination.height);
        blit(destination.fbo);
    }

    function splat(x, y, dx, dy, color) {
        gl.viewport(0, 0, simWidth, simHeight);
        splatProgram.bind();
        gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read.attach(0));
        gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height);
        gl.uniform2f(splatProgram.uniforms.point, x / canvas.width, 1.0 - y / canvas.height);
        gl.uniform3f(splatProgram.uniforms.color, dx, -dy, 1.0);
        gl.uniform1f(splatProgram.uniforms.radius, config.SPLAT_RADIUS / 100.0);
        blit(velocity.write.fbo);
        velocity.swap();

        gl.viewport(0, 0, dyeWidth, dyeHeight);
        gl.uniform1i(splatProgram.uniforms.uTarget, density.read.attach(0));
        gl.uniform3f(splatProgram.uniforms.color, color.r, color.g, color.b);
        blit(density.write.fbo);
        density.swap();
    }

    function multipleSplats(amount) {
        for (let i = 0; i < amount; i++) {
            const color = generateColor();
            color.r *= 10.0;
            color.g *= 10.0;
            color.b *= 10.0;
            const x = canvas.width * Math.random();
            const y = canvas.height * Math.random();
            const dx = 1000 * (Math.random() - 0.5);
            const dy = 1000 * (Math.random() - 0.5);
            splat(x, y, dx, dy, color);
        }
    }

    function resizeCanvas() {
        if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
            initFramebuffers();
        }
    }

    // The canvas renders BEHIND page content, so pointer data is read from window
    // events and mapped into canvas space via its bounding rect. Listeners are
    // passive and never preventDefault, so page scroll is untouched.
    function pointerPos(clientX, clientY) {
        const rect = canvas.getBoundingClientRect();
        return { x: clientX - rect.left, y: clientY - rect.top };
    }

    const teardown = [];
    function on(target, type, handler, opts) {
        target.addEventListener(type, handler, opts);
        teardown.push(() => target.removeEventListener(type, handler, opts));
    }

    on(window, 'mousemove', e => {
        const { x, y } = pointerPos(e.clientX, e.clientY);
        const p = pointers[0];
        if (!p.everMoved) {
            p.everMoved = true;
            p.x = x;
            p.y = y;
            p.down = true;
            return;
        }
        p.down = true;
        p.moved = true;
        p.dx = (x - p.x) * 5.0;
        p.dy = (y - p.y) * 5.0;
        p.x = x;
        p.y = y;
        p.color = generateColor();
    });

    on(window, 'touchmove', e => {
        const touches = e.targetTouches;
        for (let i = 0; i < touches.length; i++) {
            if (i >= pointers.length)
                pointers.push(new pointerPrototype());
            const p = pointers[i];
            const { x, y } = pointerPos(touches[i].clientX, touches[i].clientY);
            p.down = true;
            p.moved = p.everMoved === true;
            p.everMoved = true;
            p.dx = (x - p.x) * 8.0;
            p.dy = (y - p.y) * 8.0;
            p.x = x;
            p.y = y;
        }
    }, { passive: true });

    on(window, 'touchstart', e => {
        const touches = e.targetTouches;
        for (let i = 0; i < touches.length; i++) {
            if (i >= pointers.length)
                pointers.push(new pointerPrototype());
            const p = pointers[i];
            const { x, y } = pointerPos(touches[i].clientX, touches[i].clientY);
            p.id = touches[i].identifier;
            p.down = true;
            p.x = x;
            p.y = y;
            p.color = generateColor();
        }
    }, { passive: true });

    on(window, 'mouseup', () => {
        pointers[0].down = false;
    });

    on(window, 'touchend', e => {
        const touches = e.changedTouches;
        for (let i = 0; i < touches.length; i++)
            for (let j = 0; j < pointers.length; j++)
                if (touches[i].identifier == pointers[j].id)
                    pointers[j].down = false;
    });

    return function destroy() {
        destroyed = true;
        if (rafHandle) cancelAnimationFrame(rafHandle);
        for (const off of teardown) off();
    };

    function generateColor() {
        // Electric cyan→blue→violet→magenta band, full brightness, for a vivid,
        // slick, immersive palette.
        const h = 0.5 + Math.random() * 0.42;
        let c = HSVtoRGB(h, 0.95, 1.0);
        c.r *= 0.92;
        c.g *= 0.92;
        c.b *= 0.92;
        return c;
    }

    function HSVtoRGB(h, s, v) {
        let r, g, b, i, f, p, q, t;
        i = Math.floor(h * 6);
        f = h * 6 - i;
        p = v * (1 - s);
        q = v * (1 - f * s);
        t = v * (1 - (1 - f) * s);

        switch (i % 6) {
            case 0: r = v, g = t, b = p; break;
            case 1: r = q, g = v, b = p; break;
            case 2: r = p, g = v, b = t; break;
            case 3: r = p, g = q, b = v; break;
            case 4: r = t, g = p, b = v; break;
            case 5: r = v, g = p, b = q; break;
        }
        return { r, g, b };
    }

    function getResolution(resolution) {
        let aspectRatio = gl.drawingBufferWidth / gl.drawingBufferHeight;
        if (aspectRatio < 1)
            aspectRatio = 1.0 / aspectRatio;

        let max = Math.round(resolution * aspectRatio);
        let min = Math.round(resolution);

        if (gl.drawingBufferWidth > gl.drawingBufferHeight)
            return { width: max, height: min };
        else
            return { width: min, height: max };
    }

    function getTextureScale(texture, width, height) {
        return { x: width / texture.width, y: height / texture.height };
    }
}
```

Mount it after DOM ready:
```js
const canvas = document.querySelector("canvas");
if (canvas) fluidSimulation(canvas);
```
The canvas must have real pixel size — give it `width:100%;height:100%` via CSS and the engine reads
`clientWidth/clientHeight`. It resizes itself each frame.

## Fixed parameters (bake these in)

- **Copy:** brand `Flowstate`; nav links `How it works? / Pricing / Products / Blog`; nav CTA
  `Get Started`; badge `10K+ already in flow`; heading `Deep Work in a Distracted World`; sub-line
  `Cut through the noise, reclaim your attention, and do work that truly matters.`; email placeholder
  `Enter your email`; submit `Join Waitlist`; footer `© 2026 Flowstate — engineered for deep work.`
- **Fluid config (already in the engine):** SIM_RESOLUTION 200, DYE_RESOLUTION 512,
  DENSITY_DISSIPATION 0.958, VELOCITY_DISSIPATION 0.96, PRESSURE_DISSIPATION 0.8,
  PRESSURE_ITERATIONS 20, CURL 42, SPLAT_RADIUS 0.22, SHADING true, COLORFUL true, BLOOM false,
  BACK_COLOR (4,5,12). Load burst: `multipleSplats(34)` + 8 queued waves. Auto-cursor: ORBIT_RADIUS
  300, ORBIT_SPEED 0.026 rad/frame, ORBIT_START_DELAY 700ms, breathing `0.72 + 0.28*sin(angle*0.37)`.
  Ink hue band `0.5 + random*0.42`, sat 0.95, val 1.0.
- **Colors:** as in the CSS custom-properties block above.
- **Reveal delays (ms):** nav 150, badge 320, heading 480, sub-line 1150, form 1450, footer 1650.
  Heading word stagger 85ms / dur 720ms / from y+26px; sub-line word stagger 22ms / dur 600ms /
  from y+14px; block reveals ~700ms `cubic-bezier(0.2,0,0,1)`.
- **Breakpoints:** sm = 640px, plus the ≥1024px and ≥1440px/1920px root-font-size steps above.
- **Type:** Onest, weights 400 / 500.

## Assets

None. (Fonts load from Google Fonts; the dithering texture is generated procedurally in-engine; no
models, images, or video.)

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement Flowstate recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d website typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Flowstate interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic flowstate motion-led digital experience data for Flowstate, 3D Website, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-getlayers-flowstate.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Flowstate, not merely the same genre.
- The root artifact is still a real, responsive 3d website experience reconstructed from the motionsites reference in the flowstate motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: Flowstate recognizable focal composition; 3d website typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 03. John & Patricia's Comfort Space

**Type:** Motion · **Category:** 3D Website · **Source:** [Andrew Woan on Codrops](https://john-and-patricias-comfort-site-about-attachment-styles.com/) · **Terms:** MIT · Codrops demo source

A real, responsive 3d website experience reconstructed from the MotionSites reference. A complete, story-led relationship site where editorial DOM content and a playful Three.js world share one intimate scrolling narrative.

# Recreate this reference faithfully: John & Patricia's Comfort Space

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-john-patricia` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/andrewwoan/john-and-patricias-romantic-comfort-website as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-john-patricia/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-john-patricia.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-john-patricia.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/05/Coupletherapy.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/05/Coupletherapy-400x300.webp?x48895
- Exact source page: https://john-and-patricias-comfort-site-about-attachment-styles.com/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/
- Source format: Next.js · Three.js · GSAP
- Creator credit: Andrew Woan on Codrops
- Source terms recorded by Foxora: MIT · Codrops demo source

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/andrewwoan/john-and-patricias-romantic-comfort-website
- Original listing and terms: https://john-and-patricias-comfort-site-about-attachment-styles.com/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: John & Patricia; Comfort Space.
- Required layout zones: John & Patricia's Comfort Space original page shell; Warm paper tones, expressive character art, oversized editorial type, tactile cards, and whimsical spatial movement.; story-led 3D hero world implementation; editorial attachment-style content system implementation; scroll-linked character and camera transitions implementation.
- Required working interactions: story-led 3D hero world; editorial attachment-style content system; scroll-linked character and camera transitions.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-john-patricia",
  "kind": "Motion",
  "source": "https://john-and-patricias-comfort-site-about-attachment-styles.com/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-john-patricia.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-john-patricia.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/05/Coupletherapy-400x300.webp?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-C179C925

- Product domain: John & Patricia's Comfort Space motion-led digital experience.
- Required root artifact: A real, responsive 3d website experience reconstructed from the MotionSites reference.
- Root view: John & Patricia's Comfort Space interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the John & Patricia's Comfort Space preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: John & Patricia's Comfort Space; 3D Website; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: John & Patricia's Comfort Space recognizable focal composition; 3d website typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: john; patricia; website; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: John & Patricia's Comfort Space recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/andrewwoan/john-and-patricias-romantic-comfort-website. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement John & Patricia's Comfort Space recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d website typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'John & Patricia's Comfort Space interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic john & patricia's comfort space motion-led digital experience data for John & Patricia's Comfort Space, 3D Website, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-john-patricia.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably John & Patricia's Comfort Space, not merely the same genre.
- The root artifact is still a real, responsive 3d website experience reconstructed from the motionsites reference in the john & patricia's comfort space motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: John & Patricia's Comfort Space recognizable focal composition; 3d website typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 04. Hand-drawn Papercraft Portfolio

**Type:** Motion · **Category:** 3D Portfolio · **Source:** [Andrew Woan on Codrops](https://www.mr-pandas-psychologically-safe-portfolio.com/) · **Terms:** MIT · Codrops demo source

A real, responsive 3d portfolio experience reconstructed from the MotionSites reference. A complete hand-drawn portfolio staged as a papercraft world, with an authored character, dimensional scenes, and narrative project discovery.

# Recreate this reference faithfully: Hand-drawn Papercraft Portfolio

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-papercraft-portfolio` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/andrewwoan/mr-pandas-psychologically-safe-portfolio as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-papercraft-portfolio/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-papercraft-portfolio.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-papercraft-portfolio.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/demovideos/107252_Hand-drawn%20Papercraft%20Portfolio.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/12/handpaper-400x300.jpg?x48895
- Exact source page: https://www.mr-pandas-psychologically-safe-portfolio.com/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/page/2/
- Source format: Next.js · Three.js
- Creator credit: Andrew Woan on Codrops
- Source terms recorded by Foxora: MIT · Codrops demo source

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/andrewwoan/mr-pandas-psychologically-safe-portfolio
- Original listing and terms: https://www.mr-pandas-psychologically-safe-portfolio.com/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Mr. Panda; Psychologically Safe Portfolio.
- Required layout zones: Hand-drawn Papercraft Portfolio original page shell; Ink outlines, folded-paper surfaces, warm off-white space, deliberately handmade typography, and charming miniature depth.; hand-drawn papercraft art direction implementation; dimensional portfolio navigation implementation; character-led responsive storytelling implementation.
- Required working interactions: hand-drawn papercraft art direction; dimensional portfolio navigation; character-led responsive storytelling.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-papercraft-portfolio",
  "kind": "Motion",
  "source": "https://www.mr-pandas-psychologically-safe-portfolio.com/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-papercraft-portfolio.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-papercraft-portfolio.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/12/handpaper-400x300.jpg?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-9D59EB7B

- Product domain: Hand-drawn Papercraft Portfolio motion-led digital experience.
- Required root artifact: A real, responsive 3d portfolio experience reconstructed from the MotionSites reference.
- Root view: Hand-drawn Papercraft Portfolio interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the Hand-drawn Papercraft Portfolio preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: Hand-drawn Papercraft Portfolio; 3D Portfolio; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: Hand-drawn Papercraft Portfolio recognizable focal composition; 3d portfolio typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: hand; drawn; portfolio; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: Hand-drawn Papercraft Portfolio recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/andrewwoan/mr-pandas-psychologically-safe-portfolio. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement Hand-drawn Papercraft Portfolio recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d portfolio typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Hand-drawn Papercraft Portfolio interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic hand-drawn papercraft portfolio motion-led digital experience data for Hand-drawn Papercraft Portfolio, 3D Portfolio, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-papercraft-portfolio.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Hand-drawn Papercraft Portfolio, not merely the same genre.
- The root artifact is still a real, responsive 3d portfolio experience reconstructed from the motionsites reference in the hand-drawn papercraft portfolio motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: Hand-drawn Papercraft Portfolio recognizable focal composition; 3d portfolio typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 05. False Earth

**Type:** Motion · **Category:** 3D Experience · **Source:** [Ming Jyun Hung on Codrops](https://false-earth.mingjyunhung.com/) · **Terms:** MIT · Codrops demo source

A real, responsive 3d experience experience reconstructed from the MotionSites reference. A procedural false planet rendered with modern Three.js TSL shaders, atmospheric light, and a carefully framed exploratory interface.

# Recreate this reference faithfully: False Earth

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-false-earth` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/momentchan/false-earth as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-false-earth/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-false-earth.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-false-earth.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/04/FalseEarth_demo.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/04/FalseEarth_featured-400x300.webp?x48895
- Exact source page: https://false-earth.mingjyunhung.com/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/
- Source format: Three.js · TSL · WebGPU
- Creator credit: Ming Jyun Hung on Codrops
- Source terms recorded by Foxora: MIT · Codrops demo source

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/momentchan/false-earth
- Original listing and terms: https://false-earth.mingjyunhung.com/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: False Earth.
- Required layout zones: False Earth original page shell; Luminous planetary haze, high-contrast dark space, fine orbital detail, and restrained technical typography.; procedural planet shader implementation; atmospheric rim light and depth implementation; camera and pointer exploration implementation.
- Required working interactions: procedural planet shader; atmospheric rim light and depth; camera and pointer exploration.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-false-earth",
  "kind": "Motion",
  "source": "https://false-earth.mingjyunhung.com/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-false-earth.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-false-earth.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/04/FalseEarth_featured-400x300.webp?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-A1358FCC

- Product domain: False Earth motion-led digital experience.
- Required root artifact: A real, responsive 3d experience experience reconstructed from the MotionSites reference.
- Root view: False Earth interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the False Earth preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: False Earth; 3D Experience; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: False Earth recognizable focal composition; 3d experience typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: false; earth; experience; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: False Earth recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/momentchan/false-earth. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement False Earth recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d experience typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'False Earth interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic false earth motion-led digital experience data for False Earth, 3D Experience, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-false-earth.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably False Earth, not merely the same genre.
- The root artifact is still a real, responsive 3d experience experience reconstructed from the motionsites reference in the false earth motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: False Earth recognizable focal composition; 3d experience typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 06. HTML in Canvas

**Type:** Motion · **Category:** 3D Interface · **Source:** [Vittorio Retrivi on Codrops](https://html-in-canvas.vercel.app/) · **Terms:** MIT · Codrops demo source

A real, responsive 3d interface experience reconstructed from the MotionSites reference. A collection of real HTML interfaces rendered through a fluid Three Fiber canvas while preserving forms, text, and interactive behavior.

# Recreate this reference faithfully: HTML in Canvas

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-html-canvas` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/motiontx/html-in-canvas as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-html-canvas/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-html-canvas.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-html-canvas.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/05/HTMLinCanvas.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/05/HTMLinCanvas_frame-400x300.webp?x48895
- Exact source page: https://html-in-canvas.vercel.app/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/
- Source format: React · Three Fiber
- Creator credit: Vittorio Retrivi on Codrops
- Source terms recorded by Foxora: MIT · Codrops demo source

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/motiontx/html-in-canvas
- Original listing and terms: https://html-in-canvas.vercel.app/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: HTML in Canvas.
- Required layout zones: HTML in Canvas original page shell; Crisp editorial UI caught inside liquid distortion, deep monochrome framing, luminous particles, and tactile pointer response.; interactive HTML-to-canvas rendering implementation; fluid distortion and particle response implementation; usable forms inside a WebGL composition implementation.
- Required working interactions: interactive HTML-to-canvas rendering; fluid distortion and particle response; usable forms inside a WebGL composition.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-html-canvas",
  "kind": "Motion",
  "source": "https://html-in-canvas.vercel.app/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-html-canvas.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-html-canvas.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/05/HTMLinCanvas_frame-400x300.webp?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-82B05C3E

- Product domain: HTML in Canvas motion-led digital experience.
- Required root artifact: A real, responsive 3d interface experience reconstructed from the MotionSites reference.
- Root view: HTML in Canvas interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the HTML in Canvas preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: HTML in Canvas; 3D Interface; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: HTML in Canvas recognizable focal composition; 3d interface typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: html; canvas; interface; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: HTML in Canvas recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/motiontx/html-in-canvas. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement HTML in Canvas recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d interface typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'HTML in Canvas interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic html in canvas motion-led digital experience data for HTML in Canvas, 3D Interface, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-html-canvas.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably HTML in Canvas, not merely the same genre.
- The root artifact is still a real, responsive 3d interface experience reconstructed from the motionsites reference in the html in canvas motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: HTML in Canvas recognizable focal composition; 3d interface typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 07. Skeleton Fluid Reveal

**Type:** Motion · **Category:** 3D Hero · **Source:** [Cullen Webber on Codrops](https://tympanus.net/Tutorials/SkeletonFluidReveal/) · **Terms:** MIT · Codrops demo source

A real, responsive 3d hero experience reconstructed from the MotionSites reference. A dual-scene skull experience where a live fluid trail reveals an illuminated X-ray layer beneath a solid sculptural surface.

# Recreate this reference faithfully: Skeleton Fluid Reveal

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-skeleton-fluid` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/cullenwebber/three-skull as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-skeleton-fluid/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-skeleton-fluid.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-skeleton-fluid.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/03/SkeletonXRay_demo-1.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/03/ThreeJS-Fluid-Reveal-1-400x300.webp?x48895
- Exact source page: https://tympanus.net/Tutorials/SkeletonFluidReveal/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/
- Source format: Three.js · WebGPU
- Creator credit: Cullen Webber on Codrops
- Source terms recorded by Foxora: MIT · Codrops demo source

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/cullenwebber/three-skull
- Original listing and terms: https://tympanus.net/Tutorials/SkeletonFluidReveal/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Skeleton Fluid Reveal.
- Required layout zones: Skeleton Fluid Reveal original page shell; Black void, bone geometry, cyan X-ray energy, liquid pointer bloom, and cinematic high-frequency detail.; dual-scene fluid X-ray reveal implementation; pointer-driven simulation implementation; WebGPU and WebGL fallback pipeline implementation.
- Required working interactions: dual-scene fluid X-ray reveal; pointer-driven simulation; WebGPU and WebGL fallback pipeline.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-skeleton-fluid",
  "kind": "Motion",
  "source": "https://tympanus.net/Tutorials/SkeletonFluidReveal/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-skeleton-fluid.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-skeleton-fluid.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/03/ThreeJS-Fluid-Reveal-1-400x300.webp?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-A439C528

- Product domain: Skeleton Fluid Reveal motion-led digital experience.
- Required root artifact: A real, responsive 3d hero experience reconstructed from the MotionSites reference.
- Root view: Skeleton Fluid Reveal interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the Skeleton Fluid Reveal preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: Skeleton Fluid Reveal; 3D Hero; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: Skeleton Fluid Reveal recognizable focal composition; 3d hero typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: skeleton; fluid; hero; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: Skeleton Fluid Reveal recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/cullenwebber/three-skull. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement Skeleton Fluid Reveal recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d hero typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Skeleton Fluid Reveal interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic skeleton fluid reveal motion-led digital experience data for Skeleton Fluid Reveal, 3D Hero, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-skeleton-fluid.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Skeleton Fluid Reveal, not merely the same genre.
- The root artifact is still a real, responsive 3d hero experience reconstructed from the motionsites reference in the skeleton fluid reveal motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: Skeleton Fluid Reveal recognizable focal composition; 3d hero typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 08. Atmospheric Depth Gallery

**Type:** Motion · **Category:** 3D Gallery · **Source:** [Houmahani Kane on Codrops](https://tympanus.net/Tutorials/DepthGallery/) · **Terms:** MIT · Codrops demo source

A real, responsive 3d gallery experience reconstructed from the MotionSites reference. A scroll-reactive image gallery whose photographs shape the surrounding depth, palette, parallax, and velocity-sensitive atmosphere.

# Recreate this reference faithfully: Atmospheric Depth Gallery

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-depth-gallery` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/houmahani/codrops-depth-gallery as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-depth-gallery/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-depth-gallery.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-depth-gallery.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/03/depthscroll_demo.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/03/depthscroll_featured-400x300.webp?x48895
- Exact source page: https://tympanus.net/Tutorials/DepthGallery/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/
- Source format: Three.js · GLSL
- Creator credit: Houmahani Kane on Codrops
- Source terms recorded by Foxora: MIT · Codrops demo source

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/houmahani/codrops-depth-gallery
- Original listing and terms: https://tympanus.net/Tutorials/DepthGallery/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Atmospheric Depth Gallery.
- Required layout zones: Atmospheric Depth Gallery original page shell; Full-bleed photography suspended in deep space, soft environmental color fields, quiet labels, and elastic camera depth.; velocity-reactive depth gallery implementation; mood-derived GLSL backgrounds implementation; scroll parallax and image focus states implementation.
- Required working interactions: velocity-reactive depth gallery; mood-derived GLSL backgrounds; scroll parallax and image focus states.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-depth-gallery",
  "kind": "Motion",
  "source": "https://tympanus.net/Tutorials/DepthGallery/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-depth-gallery.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-depth-gallery.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/03/depthscroll_featured-400x300.webp?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-C3AD0070

- Product domain: Atmospheric Depth Gallery motion-led digital experience.
- Required root artifact: A real, responsive 3d gallery experience reconstructed from the MotionSites reference.
- Root view: Atmospheric Depth Gallery interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the Atmospheric Depth Gallery preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: Atmospheric Depth Gallery; 3D Gallery; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: Atmospheric Depth Gallery recognizable focal composition; 3d gallery typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: atmospheric; depth; gallery; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: Atmospheric Depth Gallery recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/houmahani/codrops-depth-gallery. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement Atmospheric Depth Gallery recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d gallery typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Atmospheric Depth Gallery interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic atmospheric depth gallery motion-led digital experience data for Atmospheric Depth Gallery, 3D Gallery, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-depth-gallery.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Atmospheric Depth Gallery, not merely the same genre.
- The root artifact is still a real, responsive 3d gallery experience reconstructed from the motionsites reference in the atmospheric depth gallery motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: Atmospheric Depth Gallery recognizable focal composition; 3d gallery typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 09. 3D Sneaker Grid

**Type:** Motion · **Category:** 3D Commerce · **Source:** [Matt Greenberg on Codrops](https://shoe-finder-wine.vercel.app/) · **Terms:** Free source · creator repository

A real, responsive 3d commerce experience reconstructed from the MotionSites reference. A spatial product-discovery grid that turns sneaker browsing into a responsive 3D retail surface with direct manipulation.

# Recreate this reference faithfully: 3D Sneaker Grid

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-sneaker-grid` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/MatthewGreenberg/shoe-finder as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-sneaker-grid/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-sneaker-grid.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-sneaker-grid.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/02/3dsneakergrid.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/02/SneakerGrid-400x300.webp?x48895
- Exact source page: https://shoe-finder-wine.vercel.app/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/
- Source format: React · Three Fiber
- Creator credit: Matt Greenberg on Codrops
- Source terms recorded by Foxora: Free source · creator repository

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/MatthewGreenberg/shoe-finder
- Original listing and terms: https://shoe-finder-wine.vercel.app/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Shoe Finder.
- Required layout zones: 3D Sneaker Grid original page shell; Bright gallery canvas, oversized product models, clean filter typography, smooth spatial grid transitions, and crisp retail polish.; interactive 3D product grid implementation; shoe selection and focus transition implementation; responsive retail controls implementation.
- Required working interactions: interactive 3D product grid; shoe selection and focus transition; responsive retail controls.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-sneaker-grid",
  "kind": "Motion",
  "source": "https://shoe-finder-wine.vercel.app/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-sneaker-grid.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-sneaker-grid.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/02/SneakerGrid-400x300.webp?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-83D8A1EC

- Product domain: 3D Sneaker Grid motion-led digital experience.
- Required root artifact: A real, responsive 3d commerce experience reconstructed from the MotionSites reference.
- Root view: 3D Sneaker Grid interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the 3D Sneaker Grid preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: 3D Sneaker Grid; 3D Commerce; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: 3D Sneaker Grid recognizable focal composition; 3d commerce typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: sneaker; grid; commerce; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: 3D Sneaker Grid recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/MatthewGreenberg/shoe-finder. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement 3D Sneaker Grid recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d commerce typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is '3D Sneaker Grid interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic 3d sneaker grid motion-led digital experience data for 3D Sneaker Grid, 3D Commerce, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-sneaker-grid.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably 3D Sneaker Grid, not merely the same genre.
- The root artifact is still a real, responsive 3d commerce experience reconstructed from the motionsites reference in the 3d sneaker grid motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: 3D Sneaker Grid recognizable focal composition; 3d commerce typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 10. Scroll-Driven 3D Image Tube

**Type:** Motion · **Category:** 3D Gallery · **Source:** [Matis Dené on Codrops](https://tympanus.net/Tutorials/3DImageTubeR3F/) · **Terms:** Free source · creator repository

A real, responsive 3d gallery experience reconstructed from the MotionSites reference. An infinite image gallery bent into a navigable 3D tube, with scroll-driven travel, curved media planes, and controlled depth.

# Recreate this reference faithfully: Scroll-Driven 3D Image Tube

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-image-tube` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/matdn/helmet as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-image-tube/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-image-tube.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-image-tube.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/02/109311_Scroll-Driven-3D-Image-Tube-with-R3F-1.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/02/3DTubeR3F-400x300.webp?x48895
- Exact source page: https://tympanus.net/Tutorials/3DImageTubeR3F/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/
- Source format: React · Three Fiber
- Creator credit: Matis Dené on Codrops
- Source terms recorded by Foxora: Free source · creator repository

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/matdn/helmet
- Original listing and terms: https://tympanus.net/Tutorials/3DImageTubeR3F/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: 3D Image Tube.
- Required layout zones: Scroll-Driven 3D Image Tube original page shell; Dark cylindrical space, luminous image tiles, strong central vanishing point, restrained labels, and smooth continuous travel.; infinite cylindrical image layout implementation; scroll-driven camera travel implementation; curved media planes and depth fog implementation.
- Required working interactions: infinite cylindrical image layout; scroll-driven camera travel; curved media planes and depth fog.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-image-tube",
  "kind": "Motion",
  "source": "https://tympanus.net/Tutorials/3DImageTubeR3F/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-image-tube.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-image-tube.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/02/3DTubeR3F-400x300.webp?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-D83468D8

- Product domain: Scroll-Driven 3D Image Tube motion-led digital experience.
- Required root artifact: A real, responsive 3d gallery experience reconstructed from the MotionSites reference.
- Root view: Scroll-Driven 3D Image Tube interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the Scroll-Driven 3D Image Tube preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: Scroll-Driven 3D Image Tube; 3D Gallery; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: Scroll-Driven 3D Image Tube recognizable focal composition; 3d gallery typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: scroll; driven; gallery; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: Scroll-Driven 3D Image Tube recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/matdn/helmet. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement Scroll-Driven 3D Image Tube recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d gallery typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Scroll-Driven 3D Image Tube interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic scroll-driven 3d image tube motion-led digital experience data for Scroll-Driven 3D Image Tube, 3D Gallery, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-image-tube.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Scroll-Driven 3D Image Tube, not merely the same genre.
- The root artifact is still a real, responsive 3d gallery experience reconstructed from the motionsites reference in the scroll-driven 3d image tube motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: Scroll-Driven 3D Image Tube recognizable focal composition; 3d gallery typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 11. Cinematic 3D Scroll

**Type:** Motion · **Category:** 3D Story · **Source:** [Joseph Santamaria on Codrops](https://tympanus.net/Tutorials/Cinematic3DScroll/) · **Terms:** Free source · creator repository

A real, responsive 3d story experience reconstructed from the MotionSites reference. A complete cinematic scroll sequence that coordinates authored 3D scenes, camera choreography, DOM copy, and GSAP timelines.

# Recreate this reference faithfully: Cinematic 3D Scroll

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-cinematic-scroll` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/JosephASG/codrops-cinematic-scroll-animations as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-cinematic-scroll/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-cinematic-scroll.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-cinematic-scroll.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/demovideos/104806_Cinematic3DScroll.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/11/cinematicGSAP_featured-1-400x300.jpeg?x48895
- Exact source page: https://tympanus.net/Tutorials/Cinematic3DScroll/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/page/2/
- Source format: React Three Fiber · GSAP
- Creator credit: Joseph Santamaria on Codrops
- Source terms recorded by Foxora: Free source · creator repository

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/JosephASG/codrops-cinematic-scroll-animations
- Original listing and terms: https://tympanus.net/Tutorials/Cinematic3DScroll/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Cinematic 3D Scroll.
- Required layout zones: Cinematic 3D Scroll original page shell; Film-like lighting, dramatic camera moves, spacious display type, controlled scene cuts, and high-contrast depth.; scroll-scrubbed camera choreography implementation; synchronized DOM and 3D scene transitions implementation; cinematic lighting and pacing implementation.
- Required working interactions: scroll-scrubbed camera choreography; synchronized DOM and 3D scene transitions; cinematic lighting and pacing.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-cinematic-scroll",
  "kind": "Motion",
  "source": "https://tympanus.net/Tutorials/Cinematic3DScroll/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-cinematic-scroll.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-cinematic-scroll.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/11/cinematicGSAP_featured-1-400x300.jpeg?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-00F2201B

- Product domain: Cinematic 3D Scroll motion-led digital experience.
- Required root artifact: A real, responsive 3d story experience reconstructed from the MotionSites reference.
- Root view: Cinematic 3D Scroll interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the Cinematic 3D Scroll preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: Cinematic 3D Scroll; 3D Story; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: Cinematic 3D Scroll recognizable focal composition; 3d story typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: cinematic; scroll; story; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: Cinematic 3D Scroll recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/JosephASG/codrops-cinematic-scroll-animations. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement Cinematic 3D Scroll recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d story typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Cinematic 3D Scroll interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic cinematic 3d scroll motion-led digital experience data for Cinematic 3D Scroll, 3D Story, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-cinematic-scroll.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Cinematic 3D Scroll, not merely the same genre.
- The root artifact is still a real, responsive 3d story experience reconstructed from the motionsites reference in the cinematic 3d scroll motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: Cinematic 3D Scroll recognizable focal composition; 3d story typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 12. WebGL Magazine

**Type:** Motion · **Category:** 3D Editorial · **Source:** [Chakib Mazouni on Codrops](https://webgl-magazine.vercel.app/) · **Terms:** Free source · creator repository

A real, responsive 3d editorial experience reconstructed from the MotionSites reference. A polished digital magazine that merges editorial DOM layout with WebGL image transitions, depth, and scroll-responsive storytelling.

# Recreate this reference faithfully: WebGL Magazine

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-webgl-magazine` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/J0SUKE/webgl-magazine as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-webgl-magazine/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-webgl-magazine.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-webgl-magazine.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/demovideos/101368_WebGL%20Magazine.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/09/Screenshot-2025-09-23-at-06.09.01-400x300.png?x48895
- Exact source page: https://webgl-magazine.vercel.app/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/page/3/
- Source format: Three.js · GSAP
- Creator credit: Chakib Mazouni on Codrops
- Source terms recorded by Foxora: Free source · creator repository

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/J0SUKE/webgl-magazine
- Original listing and terms: https://webgl-magazine.vercel.app/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: WebGL Magazine.
- Required layout zones: WebGL Magazine original page shell; Graphic magazine typography, full-bleed art photography, deep monochrome framing, and refined WebGL media transitions.; editorial WebGL page transitions implementation; scroll-reactive image treatment implementation; magazine navigation and article hierarchy implementation.
- Required working interactions: editorial WebGL page transitions; scroll-reactive image treatment; magazine navigation and article hierarchy.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-webgl-magazine",
  "kind": "Motion",
  "source": "https://webgl-magazine.vercel.app/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-webgl-magazine.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-webgl-magazine.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/09/Screenshot-2025-09-23-at-06.09.01-400x300.png?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-26F98EEC

- Product domain: WebGL Magazine motion-led digital experience.
- Required root artifact: A real, responsive 3d editorial experience reconstructed from the MotionSites reference.
- Root view: WebGL Magazine interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the WebGL Magazine preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: WebGL Magazine; 3D Editorial; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: WebGL Magazine recognizable focal composition; 3d editorial typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: webgl; magazine; editorial; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: WebGL Magazine recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/J0SUKE/webgl-magazine. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement WebGL Magazine recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d editorial typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'WebGL Magazine interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic webgl magazine motion-led digital experience data for WebGL Magazine, 3D Editorial, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-webgl-magazine.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably WebGL Magazine, not merely the same genre.
- The root artifact is still a real, responsive 3d editorial experience reconstructed from the motionsites reference in the webgl magazine motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: WebGL Magazine recognizable focal composition; 3d editorial typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 13. Immersive 3D Weather

**Type:** Motion · **Category:** 3D App · **Source:** [Carter Rink on Codrops](https://3d-weather-codrops.vercel.app/) · **Terms:** Free source · creator repository

A real, responsive 3d app experience reconstructed from the MotionSites reference. An immersive weather application where live atmospheric states become volumetric 3D scenes instead of decorative dashboard cards.

# Recreate this reference faithfully: Immersive 3D Weather

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-3d-weather` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/cartuhok/3d-weather-codrops as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-3d-weather/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-3d-weather.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-3d-weather.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/demovideos/101101_Immersive%203D%20Weather%20Visualization%20with%20React%20Three%20Fiber.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/09/3DWeather_featured-400x300.jpg?x48895
- Exact source page: https://3d-weather-codrops.vercel.app/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/page/3/
- Source format: React · Three Fiber
- Creator credit: Carter Rink on Codrops
- Source terms recorded by Foxora: Free source · creator repository

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/cartuhok/3d-weather-codrops
- Original listing and terms: https://3d-weather-codrops.vercel.app/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Weather; Forecast.
- Required layout zones: Immersive 3D Weather original page shell; Layered clouds, light shafts, atmospheric color changes, compact forecast typography, and a clear cinematic focal state.; weather-driven 3D atmosphere implementation; forecast controls and state transitions implementation; responsive product visualization implementation.
- Required working interactions: weather-driven 3D atmosphere; forecast controls and state transitions; responsive product visualization.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-3d-weather",
  "kind": "Motion",
  "source": "https://3d-weather-codrops.vercel.app/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-3d-weather.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-3d-weather.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/09/3DWeather_featured-400x300.jpg?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-F793E230

- Product domain: Immersive 3D Weather motion-led digital experience.
- Required root artifact: A real, responsive 3d app experience reconstructed from the MotionSites reference.
- Root view: Immersive 3D Weather interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the Immersive 3D Weather preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: Immersive 3D Weather; 3D App; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: Immersive 3D Weather recognizable focal composition; 3d app typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: immersive; weather; app; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: Immersive 3D Weather recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/cartuhok/3d-weather-codrops. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement Immersive 3D Weather recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d app typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Immersive 3D Weather interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic immersive 3d weather motion-led digital experience data for Immersive 3D Weather, 3D App, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-3d-weather.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Immersive 3D Weather, not merely the same genre.
- The root artifact is still a real, responsive 3d app experience reconstructed from the motionsites reference in the immersive 3d weather motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: Immersive 3D Weather recognizable focal composition; 3d app typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 14. Emotional 3D Experience

**Type:** Motion · **Category:** 3D Story · **Source:** [Andrew Woan on Codrops](https://demo-emotional-experiences-part-one.vercel.app/) · **Terms:** MIT · Codrops demo source

A real, responsive 3d story experience reconstructed from the MotionSites reference. A narrative web experience designed around emotion, with spatial scene changes, characterful art direction, and human-paced interaction.

# Recreate this reference faithfully: Emotional 3D Experience

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-emotional-experience` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/andrewwoan/demo-emotional-experiences-part-one as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-emotional-experience/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-emotional-experience.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-emotional-experience.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/demovideos/101816_Emotional%20Experiences%20with%20Three.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/10/image-2025-10-01-at-11.32.21-400x300.jpg?x48895
- Exact source page: https://demo-emotional-experiences-part-one.vercel.app/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/page/2/
- Source format: Next.js · Three.js
- Creator credit: Andrew Woan on Codrops
- Source terms recorded by Foxora: MIT · Codrops demo source

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/andrewwoan/demo-emotional-experiences-part-one
- Original listing and terms: https://demo-emotional-experiences-part-one.vercel.app/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Emotional Experiences.
- Required layout zones: Emotional 3D Experience original page shell; Soft illustrative worlds, expressive type, intimate camera framing, warm color fields, and deliberately imperfect visual texture.; emotion-led 3D narrative implementation; human-paced scene transitions implementation; illustrative spatial art direction implementation.
- Required working interactions: emotion-led 3D narrative; human-paced scene transitions; illustrative spatial art direction.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-emotional-experience",
  "kind": "Motion",
  "source": "https://demo-emotional-experiences-part-one.vercel.app/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-emotional-experience.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-emotional-experience.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/10/image-2025-10-01-at-11.32.21-400x300.jpg?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-2AE945DD

- Product domain: Emotional 3D Experience motion-led digital experience.
- Required root artifact: A real, responsive 3d story experience reconstructed from the MotionSites reference.
- Root view: Emotional 3D Experience interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the Emotional 3D Experience preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: Emotional 3D Experience; 3D Story; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: Emotional 3D Experience recognizable focal composition; 3d story typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: emotional; experience; story; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: Emotional 3D Experience recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/andrewwoan/demo-emotional-experiences-part-one. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement Emotional 3D Experience recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d story typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Emotional 3D Experience interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic emotional 3d experience motion-led digital experience data for Emotional 3D Experience, 3D Story, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-emotional-experience.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Emotional 3D Experience, not merely the same genre.
- The root artifact is still a real, responsive 3d story experience reconstructed from the motionsites reference in the emotional 3d experience motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: Emotional 3D Experience recognizable focal composition; 3d story typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 15. Curve Gallery

**Type:** Motion · **Category:** 3D Gallery · **Source:** [Gaspard Hedde on Codrops](https://tympanus.net/Tutorials/CurveGallery/) · **Terms:** Free source · creator repository

A real, responsive 3d gallery experience reconstructed from the MotionSites reference. An immersive gallery whose camera follows a Blender-authored curve through floating images with dynamic focus and scroll control.

# Recreate this reference faithfully: Curve Gallery

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-curve-gallery` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/gaspoorf/curve-gallery as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-curve-gallery/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-curve-gallery.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-curve-gallery.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/07/curvegallery_demo.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/07/curvegallery_cover-400x300.png?x48895
- Exact source page: https://tympanus.net/Tutorials/CurveGallery/
- Source collection / creator library: https://tympanus.net/codrops/hub/all/
- Source format: Three.js · Blender · GSAP
- Creator credit: Gaspard Hedde on Codrops
- Source terms recorded by Foxora: Free source · creator repository

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/gaspoorf/curve-gallery
- Original listing and terms: https://tympanus.net/Tutorials/CurveGallery/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Curve Gallery.
- Required layout zones: Curve Gallery original page shell; Dark exhibition space, crisp floating photographs, elegant depth blur, one strong travel axis, and restrained gallery labels.; Blender-authored camera path implementation; scroll-driven gallery travel implementation; dynamic image focus and depth implementation.
- Required working interactions: Blender-authored camera path; scroll-driven gallery travel; dynamic image focus and depth.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-curve-gallery",
  "kind": "Motion",
  "source": "https://tympanus.net/Tutorials/CurveGallery/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-curve-gallery.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-curve-gallery.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2026/07/curvegallery_cover-400x300.png?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-E4FF14EA

- Product domain: Curve Gallery motion-led digital experience.
- Required root artifact: A real, responsive 3d gallery experience reconstructed from the MotionSites reference.
- Root view: Curve Gallery interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the Curve Gallery preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: Curve Gallery; 3D Gallery; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: Curve Gallery recognizable focal composition; 3d gallery typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: curve; gallery; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: Curve Gallery recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/gaspoorf/curve-gallery. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement Curve Gallery recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d gallery typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Curve Gallery interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic curve gallery motion-led digital experience data for Curve Gallery, 3D Gallery, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-curve-gallery.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Curve Gallery, not merely the same genre.
- The root artifact is still a real, responsive 3d gallery experience reconstructed from the motionsites reference in the curve gallery motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: Curve Gallery recognizable focal composition; 3d gallery typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 16. Codrops Fan Museum

**Type:** Motion · **Category:** 3D Portfolio World · **Source:** [Andrew Woan on Codrops](https://tympanus.net/Tutorials/CodropsFanMuseum/) · **Terms:** MIT · Codrops demo source

A real, responsive 3d portfolio world experience reconstructed from the MotionSites reference. A complete Blender-authored museum world where visitors move through themed rooms, inspect interactive exhibits, and discover Codrops history through spatial storytelling.

# Recreate this reference faithfully: Codrops Fan Museum

You are an expert creative front-end developer. Reproduce the referenced motion so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `codrops-fan-museum` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/andrewwoan/codrops-fan-museum as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original 3D experience at '/'.
- Do not replace the repository with a newly invented scene, self-contained poster page, screenshot recreation, or generic Three.js primitive.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/codrops-fan-museum/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-codrops-fan-museum.webp
- Foxora cached full-motion asset (runtime-safe HTTPS): https://showcase.foxora.studio/motion/codrops-fan-museum.webp
- Original full-motion asset: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/demovideos/91591_Codrops%20Fan%20Museum%20in%20Three.mp4?x48895
- Original reference visual: https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/04/Featured-Image-1-400x300.jpg?x48895
- Exact source page: https://tympanus.net/Tutorials/CodropsFanMuseum/
- Source collection / creator library: https://tympanus.net/codrops/hub/author/andrewwoan
- Source format: React · Three.js · Blender
- Creator credit: Andrew Woan on Codrops
- Source terms recorded by Foxora: MIT · Codrops demo source

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/andrewwoan/codrops-fan-museum
- Original listing and terms: https://tympanus.net/Tutorials/CodropsFanMuseum/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, assets, shaders, scene graph, and route structure before editing. Run the original experience first; do not redraw the preview from scratch.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Codrops Fan Museum; Read the tutorial; GitHub.
- Required layout zones: Codrops Fan Museum original page shell; Monumental fantasy architecture, warm torchlight, sculpted stone, deep gallery shadows, cinematic camera travel, and restrained museum overlays.; navigable Blender-authored museum world implementation; interactive exhibits and themed rooms implementation; loading, audio, camera, and responsive controls implementation.
- Required working interactions: navigable Blender-authored museum world; interactive exhibits and themed rooms; loading, audio, camera, and responsive controls.
- Responsive behavior: Preserve the source repository's real desktop and mobile camera framing, DOM overlays, pointer behavior, scrolling, loading state, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use source-controlled assets, shaders, models, fonts, and media according to the repository license. The Foxora poster and motion preview are comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the source experience at '/'.
- The defining scene, materials, camera, DOM copy, and interactions remain recognizable and functional.
- The normal root does not render a Foxora poster, preview animation, screenshot, iframe, or replacement video.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "codrops-fan-museum",
  "kind": "Motion",
  "source": "https://tympanus.net/Tutorials/CodropsFanMuseum/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-codrops-fan-museum.webp",
  "motion": "https://showcase.foxora.studio/motion/codrops-fan-museum.webp",
  "originalVisual": "https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2025/04/Featured-Image-1-400x300.jpg?x48895",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-D0D5724E

- Product domain: Codrops Fan Museum motion-led digital experience.
- Required root artifact: A real, responsive 3d portfolio world experience reconstructed from the MotionSites reference.
- Root view: Codrops Fan Museum interactive root view.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Use the Codrops Fan Museum preview to measure its art direction, then rebuild the visible shell, copy, controls, media, motion, and state as an actual interactive page. Preserve the observed palette, material response, crop, and contrast without shipping the preview as the interface.
- Composition map: Recreate the measured frame with semantic regions. Keep the focal subject, negative space, real text blocks, controls, overlaps, and lower-fold boundary in the positions visible in the reference.
- Interaction or motion identity: Implement the visible controls and reproduce the opening, midpoint, and settled motion states with the source-provided implementation recipe or a purpose-built WebGL, canvas, CSS, SVG, or video treatment.
- Visible product entities: Codrops Fan Museum; 3D Portfolio World; 3D website; interactive focal subject; semantic interface copy.
- Signature moments that must survive: Codrops Fan Museum recognizable focal composition; 3d portfolio world typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- Forbidden drift: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- Required semantic cues: codrops; fan; portfolio; animation.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: Codrops Fan Museum recognizable focal composition.
- Silhouette and occupancy: Rebuild the focal-subject outline, scale, overlap, crop, and viewport occupancy measured from the preview.
- Material, palette, and contrast: Reproduce the observed translucency, lighting, texture, palette, type treatment, and contrast distribution with real runtime layers.
- Motion or interaction: Recreate the opening, midpoint, and settled states, and make every visible interaction functional.
- Framing and negative space: Use the measured composition edge to edge with no invented wrapper, browser chrome, hero card, or unrelated crop.
- Implementation requirement: Build the root from semantic HTML plus the source-appropriate motion technology. Foxora reference media is QA-only and must not be rendered in the normal experience.
- Forbidden substitution: Do not place the Foxora poster, WebP, screenshot, GIF, or screen recording into the normal page as a background, overlay, fallback, or canonical visual.

This is an interactive motion-experience reconstruction, not an image or animation player. The Foxora poster and animated WebP are visual QA references only. They MUST NOT appear in the normal root DOM, CSS, canvas, video, loading state, reduced-motion state, error state, background, overlay, or fallback. Rebuild every visible heading, label, link, button, field, navigation item, and state as real semantic UI. Implement the focal motion with the source-provided media or the appropriate WebGL, canvas, SVG, CSS, or DOM technique. A screenshot-perfect image with no working interface is an automatic failure.

## Mandatory implementation recipe

### Required live motion implementation

1. Build the complete normal root from real HTML, CSS, and JavaScript or the established framework. The page must remain useful if Foxora's reference URLs are blocked.
2. Treat the manifest's `poster`, `motion`, and `originalVisual` fields as QA inputs only. Do not assign them to an `img`, `video`, `source`, CSS `background`, canvas texture, WebGL texture, iframe, preload tag, fallback, or error state.
3. Implement the focal motion with the technique specified by the public source recipe below. If the source recipe provides a media URL, that source media is allowed; the Foxora preview WebP is still forbidden at runtime. If no source recipe is included, inspect the exact source page and build the observed motion with purpose-built layers instead of embedding Foxora's preview.
4. Render every visible word and control as real semantic UI. Navigation, menus, pills, tabs, forms, toggles, and CTAs must have working hover, focus, active, keyboard, and responsive states.
5. Preserve the measured 960 × 610px composition at native size and at 1440 × 900px, then recompose it deliberately at tablet and mobile sizes without hiding the core workflow.
6. Implement a deterministic reduced-motion state using the same real DOM and runtime scene paused at a composed frame. Do not replace it with the Foxora poster.
7. Keep source credit and the reference manifest in a code comment or README. URLs in that comment are for attribution and QA, not runtime rendering.
8. Before reporting completion, inspect the normal root and assert: at least one semantic `main`; all visible copy exists as text nodes; all visible controls are focusable; the defining motion layer loaded; no Foxora reference URL appears in a rendered `img`, `video`, `source`, inline style, or computed `background-image`; and no screenshot plate covers the experience.

### Exact source repository recipe

Bootstrap from https://github.com/andrewwoan/codrops-fan-museum. Run the source project before modifying it, preserve its original scene graph, shaders, models, DOM overlays, routes, and interaction code, and keep the defining experience at '/'. Adapt branding or surrounding copy only after the exact source is working and visually verified. The source repository—not the Foxora preview—is the implementation authority.

The implementation is incomplete if the normal root is only a poster, animated image, video plate with no real interface, non-functional visual mock, or unrelated procedural demo.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement Codrops Fan Museum recognizable focal composition as the dominant artifact.
5. Supporting reference cues: implement 3d portfolio world typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Codrops Fan Museum interactive root view'. The following may be implemented only after the root screenshot passes: working control state; responsive and reduced-motion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic codrops fan museum motion-led digital experience data for Codrops Fan Museum, 3D Portfolio World, 3D website, interactive focal subject, semantic interface copy; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-codrops-fan-museum.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Codrops Fan Museum, not merely the same genre.
- The root artifact is still a real, responsive 3d portfolio world experience reconstructed from the motionsites reference in the codrops fan museum motion-led digital experience domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: Codrops Fan Museum recognizable focal composition; 3d portfolio world typography, controls, spacing, and viewport occupancy; 3d website motion, responsive behavior, and interaction.
- None of the prohibited substitutes appear: rendering the Foxora poster or animated WebP as the page; an unrelated stock 3D model or generic gradient scene; decorative controls or text baked into a screenshot instead of real DOM.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The opening, midpoint, and settled motion states remain recognizably equivalent to the reference.
- The normal root contains real text and working controls, and no Foxora reference asset is rendered by an image, video, background, texture, iframe, overlay, loading state, or fallback.
- A still poster, animated WebP player, generic primitive, unrelated WebGL object, or video with no real interface does not count as completion.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 17. Aimee's Papercraft World

**Type:** Website · **Category:** 3D Portfolio · **Source:** [Andrew Woan on GitHub](https://aimees-papercraft-world.com/) · **Terms:** MIT

A faithful, responsive reconstruction of the Aimee's Papercraft World homepage hero and first-fold transition. A seasonal portfolio built as four connected miniature papercraft rooms, with illustrated characters, tactile scenery, and project storytelling embedded into the world.

# Recreate this reference faithfully: Aimee's Papercraft World

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `threejs-aimee-papercraft-world` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/andrewwoan/aimee-weis-papercraft-world as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original interactive website at '/'.
- Do not replace the repository with a newly invented landing page, screenshot recreation, iframe, or generic Three.js scene.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/threejs-aimee-papercraft-world/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-threejs-aimee-papercraft-world.webp

- Original reference visual: https://raw.githubusercontent.com/andrewwoan/aimee-weis-papercraft-world/main/public/media/og-image.webp
- Exact source page: https://aimees-papercraft-world.com/
- Source collection / creator library: https://tympanus.net/codrops/2025/05/15/developer-spotlight-andrew-woan/
- Source format: Three.js · Blender · Krita
- Creator credit: Andrew Woan on GitHub
- Source terms recorded by Foxora: MIT

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/andrewwoan/aimee-weis-papercraft-world
- Original listing and terms: https://aimees-papercraft-world.com/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, Blender or GLTF assets, scene graph, camera system, raycasting, audio, loading flow, and DOM overlays before editing. Run the original portfolio first; do not redraw its poster as a conventional landing page.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Aimee's Papercraft World; About Me; My Work.
- Required layout zones: Aimee's Papercraft World full-viewport 3D world; Soft paper fibers, hand-cut silhouettes, rounded miniature props, four seasonal palettes, diffuse studio light, and storybook typography pinned directly into the scenery.; four-season papercraft world navigation implementation; character-led portfolio storytelling implementation; Blender-authored rooms with hand-painted texture implementation.
- Required working interactions: four-season papercraft world navigation; character-led portfolio storytelling; Blender-authored rooms with hand-painted texture.
- Responsive behavior: Preserve the repository's real desktop and mobile camera framing, touch and keyboard controls, object hit targets, loading state, audio controls, DOM overlays, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use the Blender, GLTF, texture, font, sound, shader, and interface assets already licensed and committed in the source repository. The Foxora poster is comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the original interactive portfolio at '/'.
- The defining world, camera, lighting, scene assets, copy, and interactions remain recognizable and functional.
- The normal root does not replace the 3D world with a hero illustration, poster, screenshot, iframe, or generic Three.js primitive.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "threejs-aimee-papercraft-world",
  "kind": "Website",
  "source": "https://aimees-papercraft-world.com/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-threejs-aimee-papercraft-world.webp",
  "motion": null,
  "originalVisual": "https://raw.githubusercontent.com/andrewwoan/aimee-weis-papercraft-world/main/public/media/og-image.webp",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-A0721EC4

- Product domain: 3D Portfolio website.
- Required root artifact: A faithful, responsive reconstruction of the Aimee's Papercraft World homepage hero and first-fold transition.
- Root view: Aimee's Papercraft World homepage hero and first-fold transition.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Soft paper fibers, hand-cut silhouettes, rounded miniature props, four seasonal palettes, diffuse studio light, and storybook typography pinned directly into the scenery.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible 3d portfolio workflow real and deterministic. Prioritize four-season papercraft world navigation, character-led portfolio storytelling, Blender-authored rooms with hand-painted texture, then add only the interactions implied by the source.
- Visible product entities: 3D Portfolio; four-season papercraft world navigation; character-led portfolio storytelling; Blender-authored rooms with hand-painted texture; primary call to action.
- Signature moments that must survive: four-season papercraft world navigation; character-led portfolio storytelling; Blender-authored rooms with hand-painted texture.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: aimee; papercraft; portfolio; four; season.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: four-season papercraft world navigation.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Soft paper fibers, hand-cut silhouettes, rounded miniature props, four seasonal palettes, diffuse studio light, and storybook typography pinned directly into the scenery.
- Motion or interaction: Implement only the transitions and state changes implied by four-season papercraft world navigation, character-led portfolio storytelling, Blender-authored rooms with hand-painted texture; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining four-season papercraft world navigation with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/andrewwoan/aimee-weis-papercraft-world, preserve its original Three.js scene, Blender assets, camera, controls, and DOM overlays, and run the real interactive website. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement four-season papercraft world navigation as the dominant artifact.
5. Supporting reference cues: implement character-led portfolio storytelling; Blender-authored rooms with hand-painted texture.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Aimee's Papercraft World homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: four-season papercraft world navigation state; character-led portfolio storytelling state; Blender-authored rooms with hand-painted texture state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic 3d portfolio website data for 3D Portfolio, four-season papercraft world navigation, character-led portfolio storytelling, Blender-authored rooms with hand-painted texture, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-threejs-aimee-papercraft-world.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Aimee's Papercraft World, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the aimee's papercraft world homepage hero and first-fold transition in the 3d portfolio website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: four-season papercraft world navigation; character-led portfolio storytelling; Blender-authored rooms with hand-painted texture.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 18. Sooah's Room Folio

**Type:** Website · **Category:** 3D Portfolio · **Source:** [Andrew Woan on GitHub](https://www.sooahs-room-folio.com/) · **Terms:** MIT

A faithful, responsive reconstruction of the Sooah's Room Folio homepage hero and first-fold transition. A compact room-scale portfolio where the desk, computer, shelving, signs, lighting, and personal objects become the navigation and project interface.

# Recreate this reference faithfully: Sooah's Room Folio

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `threejs-sooah-room-folio` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/andrewwoan/sooahs-room-folio as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original interactive website at '/'.
- Do not replace the repository with a newly invented landing page, screenshot recreation, iframe, or generic Three.js scene.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/threejs-sooah-room-folio/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-threejs-sooah-room-folio.webp

- Original reference visual: https://raw.githubusercontent.com/andrewwoan/sooahs-room-folio/main/public/media/og-image.webp
- Exact source page: https://www.sooahs-room-folio.com/
- Source collection / creator library: https://tympanus.net/codrops/2025/05/15/developer-spotlight-andrew-woan/
- Source format: Three.js · Blender · GSAP
- Creator credit: Andrew Woan on GitHub
- Source terms recorded by Foxora: MIT

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/andrewwoan/sooahs-room-folio
- Original listing and terms: https://www.sooahs-room-folio.com/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, Blender or GLTF assets, scene graph, camera system, raycasting, audio, loading flow, and DOM overlays before editing. Run the original portfolio first; do not redraw its poster as a conventional landing page.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: My Work; About; Contact.
- Required layout zones: Sooah's Room Folio full-viewport 3D world; Lavender and blush lighting, soft rounded furniture, warm timber, toy-like proportions, dense personal details, and chunky wooden navigation signs.; raycast room-object interactions implementation; camera travel between work, about, and contact implementation; sound and lighting controls inside the scene implementation.
- Required working interactions: raycast room-object interactions; camera travel between work, about, and contact; sound and lighting controls inside the scene.
- Responsive behavior: Preserve the repository's real desktop and mobile camera framing, touch and keyboard controls, object hit targets, loading state, audio controls, DOM overlays, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use the Blender, GLTF, texture, font, sound, shader, and interface assets already licensed and committed in the source repository. The Foxora poster is comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the original interactive portfolio at '/'.
- The defining world, camera, lighting, scene assets, copy, and interactions remain recognizable and functional.
- The normal root does not replace the 3D world with a hero illustration, poster, screenshot, iframe, or generic Three.js primitive.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "threejs-sooah-room-folio",
  "kind": "Website",
  "source": "https://www.sooahs-room-folio.com/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-threejs-sooah-room-folio.webp",
  "motion": null,
  "originalVisual": "https://raw.githubusercontent.com/andrewwoan/sooahs-room-folio/main/public/media/og-image.webp",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-9417F251

- Product domain: 3D Portfolio website.
- Required root artifact: A faithful, responsive reconstruction of the Sooah's Room Folio homepage hero and first-fold transition.
- Root view: Sooah's Room Folio homepage hero and first-fold transition.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Lavender and blush lighting, soft rounded furniture, warm timber, toy-like proportions, dense personal details, and chunky wooden navigation signs.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible 3d portfolio workflow real and deterministic. Prioritize raycast room-object interactions, camera travel between work, about, and contact, sound and lighting controls inside the scene, then add only the interactions implied by the source.
- Visible product entities: 3D Portfolio; raycast room-object interactions; camera travel between work, about, and contact; sound and lighting controls inside the scene; primary call to action.
- Signature moments that must survive: raycast room-object interactions; camera travel between work, about, and contact; sound and lighting controls inside the scene.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: sooah; room; portfolio; raycast.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: raycast room-object interactions.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Lavender and blush lighting, soft rounded furniture, warm timber, toy-like proportions, dense personal details, and chunky wooden navigation signs.
- Motion or interaction: Implement only the transitions and state changes implied by raycast room-object interactions, camera travel between work, about, and contact, sound and lighting controls inside the scene; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining raycast room-object interactions with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/andrewwoan/sooahs-room-folio, preserve its original Three.js scene, Blender assets, camera, controls, and DOM overlays, and run the real interactive website. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement raycast room-object interactions as the dominant artifact.
5. Supporting reference cues: implement camera travel between work, about, and contact; sound and lighting controls inside the scene.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Sooah's Room Folio homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: raycast room-object interactions state; camera travel between work, about, and contact state; sound and lighting controls inside the scene state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic 3d portfolio website data for 3D Portfolio, raycast room-object interactions, camera travel between work, about, and contact, sound and lighting controls inside the scene, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-threejs-sooah-room-folio.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Sooah's Room Folio, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the sooah's room folio homepage hero and first-fold transition in the 3d portfolio website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: raycast room-object interactions; camera travel between work, about, and contact; sound and lighting controls inside the scene.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 19. Bella's Park

**Type:** Website · **Category:** 3D Portfolio Game · **Source:** [Andrew Woan on GitHub](https://www.bellas-park.com/) · **Terms:** MIT

A faithful, responsive reconstruction of the Bella's Park homepage hero and first-fold transition. A beginner-friendly low-poly portfolio world inspired by playful crossing games, with a controllable character, discoverable areas, and portfolio content placed along the route.

# Recreate this reference faithfully: Bella's Park

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `threejs-bellas-park` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/andrewwoan/bellas-park as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original interactive website at '/'.
- Do not replace the repository with a newly invented landing page, screenshot recreation, iframe, or generic Three.js scene.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/threejs-bellas-park/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-threejs-bellas-park.webp

- Original reference visual: https://raw.githubusercontent.com/andrewwoan/bellas-park/main/media/og-image.webp
- Exact source page: https://www.bellas-park.com/
- Source collection / creator library: https://tympanus.net/codrops/2025/05/15/developer-spotlight-andrew-woan/
- Source format: Three.js · Blender
- Creator credit: Andrew Woan on GitHub
- Source terms recorded by Foxora: MIT

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/andrewwoan/bellas-park
- Original listing and terms: https://www.bellas-park.com/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, Blender or GLTF assets, scene graph, camera system, raycasting, audio, loading flow, and DOM overlays before editing. Run the original portfolio first; do not redraw its poster as a conventional landing page.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Bella's Park.
- Required layout zones: Bella's Park full-viewport 3D world; Bright low-poly grass, block-built scenery, friendly character animation, miniature park props, compact interface labels, and cheerful game-like staging.; keyboard and touch character movement implementation; explorable low-poly portfolio map implementation; music, sound, and environmental feedback implementation.
- Required working interactions: keyboard and touch character movement; explorable low-poly portfolio map; music, sound, and environmental feedback.
- Responsive behavior: Preserve the repository's real desktop and mobile camera framing, touch and keyboard controls, object hit targets, loading state, audio controls, DOM overlays, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use the Blender, GLTF, texture, font, sound, shader, and interface assets already licensed and committed in the source repository. The Foxora poster is comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the original interactive portfolio at '/'.
- The defining world, camera, lighting, scene assets, copy, and interactions remain recognizable and functional.
- The normal root does not replace the 3D world with a hero illustration, poster, screenshot, iframe, or generic Three.js primitive.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "threejs-bellas-park",
  "kind": "Website",
  "source": "https://www.bellas-park.com/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-threejs-bellas-park.webp",
  "motion": null,
  "originalVisual": "https://raw.githubusercontent.com/andrewwoan/bellas-park/main/media/og-image.webp",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-79686351

- Product domain: 3D Portfolio Game website.
- Required root artifact: A faithful, responsive reconstruction of the Bella's Park homepage hero and first-fold transition.
- Root view: Bella's Park homepage hero and first-fold transition.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Bright low-poly grass, block-built scenery, friendly character animation, miniature park props, compact interface labels, and cheerful game-like staging.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible 3d portfolio game workflow real and deterministic. Prioritize keyboard and touch character movement, explorable low-poly portfolio map, music, sound, and environmental feedback, then add only the interactions implied by the source.
- Visible product entities: 3D Portfolio Game; keyboard and touch character movement; explorable low-poly portfolio map; music, sound, and environmental feedback; primary call to action.
- Signature moments that must survive: keyboard and touch character movement; explorable low-poly portfolio map; music, sound, and environmental feedback.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: bella; park; portfolio; game; keyboard; and.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: keyboard and touch character movement.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Bright low-poly grass, block-built scenery, friendly character animation, miniature park props, compact interface labels, and cheerful game-like staging.
- Motion or interaction: Implement only the transitions and state changes implied by keyboard and touch character movement, explorable low-poly portfolio map, music, sound, and environmental feedback; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining keyboard and touch character movement with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/andrewwoan/bellas-park, preserve its original Three.js scene, Blender assets, camera, controls, and DOM overlays, and run the real interactive website. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement keyboard and touch character movement as the dominant artifact.
5. Supporting reference cues: implement explorable low-poly portfolio map; music, sound, and environmental feedback.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Bella's Park homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: keyboard and touch character movement state; explorable low-poly portfolio map state; music, sound, and environmental feedback state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic 3d portfolio game website data for 3D Portfolio Game, keyboard and touch character movement, explorable low-poly portfolio map, music, sound, and environmental feedback, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-threejs-bellas-park.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Bella's Park, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the bella's park homepage hero and first-fold transition in the 3d portfolio game website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: keyboard and touch character movement; explorable low-poly portfolio map; music, sound, and environmental feedback.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 20. Daniel's Home Office

**Type:** Website · **Category:** 3D Architecture Portfolio · **Source:** [Andrew Woan on GitHub](https://www.daniels-architects.com/) · **Terms:** MIT

A faithful, responsive reconstruction of the Daniel's Home Office homepage hero and first-fold transition. An isometric architecture portfolio organized around two contrasting home-office personalities, using spatial hotspots and room changes to reveal work.

# Recreate this reference faithfully: Daniel's Home Office

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `threejs-daniels-home-office` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/andrewwoan/daniels-home-office-portfolio as the starting codebase. Follow its README and lockfile, install its actual dependencies, and run its original interactive website at '/'.
- Do not replace the repository with a newly invented landing page, screenshot recreation, iframe, or generic Three.js scene.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/threejs-daniels-home-office/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-threejs-daniels-home-office.webp

- Original reference visual: https://raw.githubusercontent.com/andrewwoan/daniels-home-office-portfolio/main/public/media/og-image.webp
- Exact source page: https://www.daniels-architects.com/
- Source collection / creator library: https://tympanus.net/codrops/2025/05/15/developer-spotlight-andrew-woan/
- Source format: React · Three.js · Blender
- Creator credit: Andrew Woan on GitHub
- Source terms recorded by Foxora: MIT

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source 3D repository.
- Exact implementation authority: https://github.com/andrewwoan/daniels-home-office-portfolio
- Original listing and terms: https://www.daniels-architects.com/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact public repository as the implementation starting point. Inspect its README, license, lockfile, scripts, Blender or GLTF assets, scene graph, camera system, raycasting, audio, loading flow, and DOM overlays before editing. Run the original portfolio first; do not redraw its poster as a conventional landing page.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Daniel's Architects.
- Required layout zones: Daniel's Home Office full-viewport 3D world; Architectural dollhouse framing, pale brick and timber, meticulous miniature furniture, warm daylight, a contrasting night room, and calm professional overlays.; light and dark room personality switch implementation; interactive architectural hotspots implementation; video textures and camera-led project reveals implementation.
- Required working interactions: light and dark room personality switch; interactive architectural hotspots; video textures and camera-led project reveals.
- Responsive behavior: Preserve the repository's real desktop and mobile camera framing, touch and keyboard controls, object hit targets, loading state, audio controls, DOM overlays, WebGL fallback, and reduced-motion behavior.
- Asset policy: Use the Blender, GLTF, texture, font, sound, shader, and interface assets already licensed and committed in the source repository. The Foxora poster is comparison-only and must not be rendered by the generated experience.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or contains its exact source tree.
- The official install and start commands reach the original interactive portfolio at '/'.
- The defining world, camera, lighting, scene assets, copy, and interactions remain recognizable and functional.
- The normal root does not replace the 3D world with a hero illustration, poster, screenshot, iframe, or generic Three.js primitive.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "threejs-daniels-home-office",
  "kind": "Website",
  "source": "https://www.daniels-architects.com/",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-threejs-daniels-home-office.webp",
  "motion": null,
  "originalVisual": "https://raw.githubusercontent.com/andrewwoan/daniels-home-office-portfolio/main/public/media/og-image.webp",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-5752C24A

- Product domain: 3D Architecture Portfolio website.
- Required root artifact: A faithful, responsive reconstruction of the Daniel's Home Office homepage hero and first-fold transition.
- Root view: Daniel's Home Office homepage hero and first-fold transition.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Architectural dollhouse framing, pale brick and timber, meticulous miniature furniture, warm daylight, a contrasting night room, and calm professional overlays.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible 3d architecture portfolio workflow real and deterministic. Prioritize light and dark room personality switch, interactive architectural hotspots, video textures and camera-led project reveals, then add only the interactions implied by the source.
- Visible product entities: 3D Architecture Portfolio; light and dark room personality switch; interactive architectural hotspots; video textures and camera-led project reveals; primary call to action.
- Signature moments that must survive: light and dark room personality switch; interactive architectural hotspots; video textures and camera-led project reveals.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: daniel; home; architecture; portfolio; light; and.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: light and dark room personality switch.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Architectural dollhouse framing, pale brick and timber, meticulous miniature furniture, warm daylight, a contrasting night room, and calm professional overlays.
- Motion or interaction: Implement only the transitions and state changes implied by light and dark room personality switch, interactive architectural hotspots, video textures and camera-led project reveals; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining light and dark room personality switch with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/andrewwoan/daniels-home-office-portfolio, preserve its original Three.js scene, Blender assets, camera, controls, and DOM overlays, and run the real interactive website. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement light and dark room personality switch as the dominant artifact.
5. Supporting reference cues: implement interactive architectural hotspots; video textures and camera-led project reveals.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Daniel's Home Office homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: light and dark room personality switch state; interactive architectural hotspots state; video textures and camera-led project reveals state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic 3d architecture portfolio website data for 3D Architecture Portfolio, light and dark room personality switch, interactive architectural hotspots, video textures and camera-led project reveals, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-threejs-daniels-home-office.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Daniel's Home Office, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the daniel's home office homepage hero and first-fold transition in the 3d architecture portfolio website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: light and dark room personality switch; interactive architectural hotspots; video textures and camera-led project reveals.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 21. Plane

**Type:** App · **Category:** Project Management · **Source:** [Plane on GitHub](https://github.com/makeplane/plane) · **Terms:** AGPL-3.0

A faithful, responsive reconstruction of the Plane primary product interface. A refined work-management product with multi-level navigation, dense issue boards, multiple views, filters, cycles, modules, and collaborative project context.

# Recreate this reference faithfully: Plane

You are an expert creative front-end developer. Reproduce the referenced app so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `github-plane` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/makeplane/plane as the starting codebase. Follow its README and lockfile; install and run the official application instead of producing a one-file visual imitation.
- Do not replace the source application with a self-contained `index.html`, screenshot recreation, or newly invented shell.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/github-plane/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-github-plane.webp

- Original reference visual: https://media.docs.plane.so/GitHub-readme/github-top.webp
- Exact source page: https://github.com/makeplane/plane
- Source collection / creator library: https://plane.so/
- Source format: React · Django
- Creator credit: Plane on GitHub
- Source terms recorded by Foxora: AGPL-3.0

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source repository.
- Exact implementation authority: https://github.com/makeplane/plane
- Original listing and terms: https://github.com/makeplane/plane
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact source repository as the implementation starting point. Inspect its README, lockfile, package scripts, environment example, route tree, and existing components before editing. Preserve the source stack and run the official application; do not redraw its poster in a new project.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Projects; Work items; Backlog; Todo; In progress.
- Required layout zones: Plane application shell; Bright precision UI, icon-led vertical rail, nested workspace sidebar, fine neutral borders, compact status chips, roomy kanban columns, and disciplined typography.; nested workspace and project navigation working state; multi-view work-item board working state; filters, states, assignments, and due-date density working state.
- Required working interactions: nested workspace and project navigation; multi-view work-item board; filters, states, assignments, and due-date density.
- Responsive behavior: Preserve the repository's real responsive navigation, pane collapse, table or canvas overflow, dialogs, keyboard behavior, loading, empty, error, and success states.
- Asset policy: Reuse assets already licensed and committed in the source repository. Do not replace the defining UI with the Foxora poster or invent stock media.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or its exact source tree.
- The official startup command reaches the real primary product route.
- The source navigation, terminology, controls, and core workflow remain recognizable and functional.
- No marketing hero, screenshot plate, or unrelated dashboard replaces the application.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "github-plane",
  "kind": "App",
  "source": "https://github.com/makeplane/plane",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-github-plane.webp",
  "motion": null,
  "originalVisual": "https://media.docs.plane.so/GitHub-readme/github-top.webp",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-E7755ECD

- Product domain: Project Management application.
- Required root artifact: A faithful, responsive reconstruction of the Plane primary product interface.
- Root view: Plane primary product interface.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Bright precision UI, icon-led vertical rail, nested workspace sidebar, fine neutral borders, compact status chips, roomy kanban columns, and disciplined typography.
- Composition map: Match the cached application poster as one measured workspace. Preserve the original navigation, sidebars, toolbars, content panes, tables, cards, charts, forms, controls, data density, and active state without adding a marketing shell.
- Interaction or motion identity: Make the visible project management workflow real and deterministic. Prioritize nested workspace and project navigation, multi-view work-item board, filters, states, assignments, and due-date density, then add only the interactions implied by the source.
- Visible product entities: Project Management; nested workspace and project navigation; multi-view work-item board; filters, states, assignments, and due-date density; active workspace state.
- Signature moments that must survive: nested workspace and project navigation; multi-view work-item board; filters, states, assignments, and due-date density.
- Forbidden drift: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- Required semantic cues: plane; project; management; nested; workspace.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: nested workspace and project navigation.
- Silhouette and occupancy: Preserve the exact application shell, pane proportions, navigation density, dominant working surface, and visible active state.
- Material, palette, and contrast: Bright precision UI, icon-led vertical rail, nested workspace sidebar, fine neutral borders, compact status chips, roomy kanban columns, and disciplined typography.
- Motion or interaction: Implement only the transitions and state changes implied by nested workspace and project navigation, multi-view work-item board, filters, states, assignments, and due-date density; keep the initial screenshot deterministic.
- Framing and negative space: Fill the viewport with the product interface exactly as shown, without an outer browser frame or promotional hero.
- Implementation requirement: Build a semantic application as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining nested workspace and project navigation with a generic component, stock layout, or different product concept.

This is a faithful product-interface reconstruction, not a marketing website and not a screenshot plate. The normal root MUST be the real semantic application. Rebuild the visible chrome, navigation, controls, tables, charts, forms, data density, copy, and state. Do not rename the product, prepend a landing-page hero, create an unrelated dashboard, or add decorative marketing chrome.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/makeplane/plane, preserve its source stack and existing component tree, and run its real primary product route. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement nested workspace and project navigation as the dominant artifact.
5. Supporting reference cues: implement multi-view work-item board; filters, states, assignments, and due-date density.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Plane primary product interface'. The following may be implemented only after the root screenshot passes: nested workspace and project navigation state; multi-view work-item board state; filters, states, assignments, and due-date density state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic project management application data for Project Management, nested workspace and project navigation, multi-view work-item board, filters, states, assignments, and due-date density, active workspace state; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-github-plane.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Plane, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the plane primary product interface in the project management application domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: nested workspace and project navigation; multi-view work-item board; filters, states, assignments, and due-date density.
- None of the prohibited substitutes appear: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 22. Documenso

**Type:** App · **Category:** Document Signing · **Source:** [Documenso on GitHub](https://github.com/documenso/documenso) · **Terms:** AGPL-3.0

A faithful, responsive reconstruction of the Documenso primary product interface. A complete document-signing workspace with inbox navigation, document status, recipients, field placement, signature flows, templates, teams, and audit-ready history.

# Recreate this reference faithfully: Documenso

You are an expert creative front-end developer. Reproduce the referenced app so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `github-documenso` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/documenso/documenso as the starting codebase. Follow its README and lockfile; install and run the official application instead of producing a one-file visual imitation.
- Do not replace the source application with a self-contained `index.html`, screenshot recreation, or newly invented shell.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/github-documenso/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-github-documenso.webp

- Original reference visual: https://raw.githubusercontent.com/documenso/documenso/main/apps/docs/public/document-signing/documenso-editor-preview.webp
- Exact source page: https://github.com/documenso/documenso
- Source collection / creator library: https://documenso.com/
- Source format: Next.js · Prisma
- Creator credit: Documenso on GitHub
- Source terms recorded by Foxora: AGPL-3.0

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source repository.
- Exact implementation authority: https://github.com/documenso/documenso
- Original listing and terms: https://github.com/documenso/documenso
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact source repository as the implementation starting point. Inspect its README, lockfile, package scripts, environment example, route tree, and existing components before editing. Preserve the source stack and run the official application; do not redraw its poster in a new project.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Documenso; Documents; Templates; Recipients.
- Required layout zones: Documenso application shell; Crisp white document workspace, restrained violet brand accent, compact rows, clear status language, generous PDF canvas, and focused signing controls.; document inbox and status workflow working state; recipient and signature-field placement working state; template, team, and audit-history states working state.
- Required working interactions: document inbox and status workflow; recipient and signature-field placement; template, team, and audit-history states.
- Responsive behavior: Preserve the repository's real responsive navigation, pane collapse, table or canvas overflow, dialogs, keyboard behavior, loading, empty, error, and success states.
- Asset policy: Reuse assets already licensed and committed in the source repository. Do not replace the defining UI with the Foxora poster or invent stock media.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or its exact source tree.
- The official startup command reaches the real primary product route.
- The source navigation, terminology, controls, and core workflow remain recognizable and functional.
- No marketing hero, screenshot plate, or unrelated dashboard replaces the application.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "github-documenso",
  "kind": "App",
  "source": "https://github.com/documenso/documenso",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-github-documenso.webp",
  "motion": null,
  "originalVisual": "https://raw.githubusercontent.com/documenso/documenso/main/apps/docs/public/document-signing/documenso-editor-preview.webp",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-C30B2242

- Product domain: Document Signing application.
- Required root artifact: A faithful, responsive reconstruction of the Documenso primary product interface.
- Root view: Documenso primary product interface.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Crisp white document workspace, restrained violet brand accent, compact rows, clear status language, generous PDF canvas, and focused signing controls.
- Composition map: Match the cached application poster as one measured workspace. Preserve the original navigation, sidebars, toolbars, content panes, tables, cards, charts, forms, controls, data density, and active state without adding a marketing shell.
- Interaction or motion identity: Make the visible document signing workflow real and deterministic. Prioritize document inbox and status workflow, recipient and signature-field placement, template, team, and audit-history states, then add only the interactions implied by the source.
- Visible product entities: Document Signing; document inbox and status workflow; recipient and signature-field placement; template, team, and audit-history states; active workspace state.
- Signature moments that must survive: document inbox and status workflow; recipient and signature-field placement; template, team, and audit-history states.
- Forbidden drift: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- Required semantic cues: documenso; document; signing; inbox.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: document inbox and status workflow.
- Silhouette and occupancy: Preserve the exact application shell, pane proportions, navigation density, dominant working surface, and visible active state.
- Material, palette, and contrast: Crisp white document workspace, restrained violet brand accent, compact rows, clear status language, generous PDF canvas, and focused signing controls.
- Motion or interaction: Implement only the transitions and state changes implied by document inbox and status workflow, recipient and signature-field placement, template, team, and audit-history states; keep the initial screenshot deterministic.
- Framing and negative space: Fill the viewport with the product interface exactly as shown, without an outer browser frame or promotional hero.
- Implementation requirement: Build a semantic application as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining document inbox and status workflow with a generic component, stock layout, or different product concept.

This is a faithful product-interface reconstruction, not a marketing website and not a screenshot plate. The normal root MUST be the real semantic application. Rebuild the visible chrome, navigation, controls, tables, charts, forms, data density, copy, and state. Do not rename the product, prepend a landing-page hero, create an unrelated dashboard, or add decorative marketing chrome.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/documenso/documenso, preserve its source stack and existing component tree, and run its real primary product route. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement document inbox and status workflow as the dominant artifact.
5. Supporting reference cues: implement recipient and signature-field placement; template, team, and audit-history states.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Documenso primary product interface'. The following may be implemented only after the root screenshot passes: document inbox and status workflow state; recipient and signature-field placement state; template, team, and audit-history states state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic document signing application data for Document Signing, document inbox and status workflow, recipient and signature-field placement, template, team, and audit-history states, active workspace state; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-github-documenso.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Documenso, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the documenso primary product interface in the document signing application domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: document inbox and status workflow; recipient and signature-field placement; template, team, and audit-history states.
- None of the prohibited substitutes appear: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 23. Midday

**Type:** App · **Category:** Finance Operations · **Source:** [Midday on GitHub](https://github.com/midday-ai/midday) · **Terms:** AGPL-3.0

A faithful, responsive reconstruction of the Midday primary product interface. A cohesive financial operating system for freelancers with transaction reconciliation, time tracking, invoices, files, projects, analytics, and an assistant.

# Recreate this reference faithfully: Midday

You are an expert creative front-end developer. Reproduce the referenced app so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `github-midday` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/midday-ai/midday as the starting codebase. Follow its README and lockfile; install and run the official application instead of producing a one-file visual imitation.
- Do not replace the source application with a self-contained `index.html`, screenshot recreation, or newly invented shell.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/github-midday/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-github-midday.webp

- Original reference visual: https://raw.githubusercontent.com/midday-ai/midday/main/github.png
- Exact source page: https://github.com/midday-ai/midday
- Source collection / creator library: https://midday.ai/
- Source format: Next.js · Supabase
- Creator credit: Midday on GitHub
- Source terms recorded by Foxora: AGPL-3.0

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source repository.
- Exact implementation authority: https://github.com/midday-ai/midday
- Original listing and terms: https://github.com/midday-ai/midday
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact source repository as the implementation starting point. Inspect its README, lockfile, package scripts, environment example, route tree, and existing components before editing. Preserve the source stack and run the official application; do not redraw its poster in a new project.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Midday; Transactions; Projects; Tracker; Invoices.
- Required layout zones: Midday application shell; Near-black application canvas, hairline borders, white financial typography, restrained emerald status color, sweeping line charts, and tightly cropped data panes.; financial overview and runway analytics working state; transaction and file reconciliation working state; time, project, and invoice operations working state.
- Required working interactions: financial overview and runway analytics; transaction and file reconciliation; time, project, and invoice operations.
- Responsive behavior: Preserve the repository's real responsive navigation, pane collapse, table or canvas overflow, dialogs, keyboard behavior, loading, empty, error, and success states.
- Asset policy: Reuse assets already licensed and committed in the source repository. Do not replace the defining UI with the Foxora poster or invent stock media.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or its exact source tree.
- The official startup command reaches the real primary product route.
- The source navigation, terminology, controls, and core workflow remain recognizable and functional.
- No marketing hero, screenshot plate, or unrelated dashboard replaces the application.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "github-midday",
  "kind": "App",
  "source": "https://github.com/midday-ai/midday",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-github-midday.webp",
  "motion": null,
  "originalVisual": "https://raw.githubusercontent.com/midday-ai/midday/main/github.png",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-C01BA675

- Product domain: Finance Operations application.
- Required root artifact: A faithful, responsive reconstruction of the Midday primary product interface.
- Root view: Midday primary product interface.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Near-black application canvas, hairline borders, white financial typography, restrained emerald status color, sweeping line charts, and tightly cropped data panes.
- Composition map: Match the cached application poster as one measured workspace. Preserve the original navigation, sidebars, toolbars, content panes, tables, cards, charts, forms, controls, data density, and active state without adding a marketing shell.
- Interaction or motion identity: Make the visible finance operations workflow real and deterministic. Prioritize financial overview and runway analytics, transaction and file reconciliation, time, project, and invoice operations, then add only the interactions implied by the source.
- Visible product entities: Finance Operations; financial overview and runway analytics; transaction and file reconciliation; time, project, and invoice operations; active workspace state.
- Signature moments that must survive: financial overview and runway analytics; transaction and file reconciliation; time, project, and invoice operations.
- Forbidden drift: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- Required semantic cues: midday; finance; operations; financial; overview.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: financial overview and runway analytics.
- Silhouette and occupancy: Preserve the exact application shell, pane proportions, navigation density, dominant working surface, and visible active state.
- Material, palette, and contrast: Near-black application canvas, hairline borders, white financial typography, restrained emerald status color, sweeping line charts, and tightly cropped data panes.
- Motion or interaction: Implement only the transitions and state changes implied by financial overview and runway analytics, transaction and file reconciliation, time, project, and invoice operations; keep the initial screenshot deterministic.
- Framing and negative space: Fill the viewport with the product interface exactly as shown, without an outer browser frame or promotional hero.
- Implementation requirement: Build a semantic application as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining financial overview and runway analytics with a generic component, stock layout, or different product concept.

This is a faithful product-interface reconstruction, not a marketing website and not a screenshot plate. The normal root MUST be the real semantic application. Rebuild the visible chrome, navigation, controls, tables, charts, forms, data density, copy, and state. Do not rename the product, prepend a landing-page hero, create an unrelated dashboard, or add decorative marketing chrome.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/midday-ai/midday, preserve its source stack and existing component tree, and run its real primary product route. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement financial overview and runway analytics as the dominant artifact.
5. Supporting reference cues: implement transaction and file reconciliation; time, project, and invoice operations.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Midday primary product interface'. The following may be implemented only after the root screenshot passes: financial overview and runway analytics state; transaction and file reconciliation state; time, project, and invoice operations state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic finance operations application data for Finance Operations, financial overview and runway analytics, transaction and file reconciliation, time, project, and invoice operations, active workspace state; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-github-midday.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Midday, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the midday primary product interface in the finance operations application domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: financial overview and runway analytics; transaction and file reconciliation; time, project, and invoice operations.
- None of the prohibited substitutes appear: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 24. OpenStatus

**Type:** App · **Category:** Uptime Monitoring · **Source:** [OpenStatus on GitHub](https://github.com/openstatusHQ/openstatus) · **Terms:** AGPL-3.0

A faithful, responsive reconstruction of the OpenStatus primary product interface. An operational monitoring product with region-aware checks, incident timelines, status pages, response charts, alert channels, and monitor-as-code workflows.

# Recreate this reference faithfully: OpenStatus

You are an expert creative front-end developer. Reproduce the referenced app so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `github-openstatus` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/openstatusHQ/openstatus as the starting codebase. Follow its README and lockfile; install and run the official application instead of producing a one-file visual imitation.
- Do not replace the source application with a self-contained `index.html`, screenshot recreation, or newly invented shell.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/github-openstatus/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-github-openstatus.webp

- Original reference visual: https://www.openstatus.dev/assets/landing/statuspage-meow.png
- Exact source page: https://github.com/openstatusHQ/openstatus
- Source collection / creator library: https://www.openstatus.dev/
- Source format: Next.js · Turborepo
- Creator credit: OpenStatus on GitHub
- Source terms recorded by Foxora: AGPL-3.0

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source repository.
- Exact implementation authority: https://github.com/openstatusHQ/openstatus
- Original listing and terms: https://github.com/openstatusHQ/openstatus
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact source repository as the implementation starting point. Inspect its README, lockfile, package scripts, environment example, route tree, and existing components before editing. Preserve the source stack and run the official application; do not redraw its poster in a new project.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: OpenStatus; All Systems Operational; Uptime; Incidents.
- Required layout zones: OpenStatus application shell; Calm cream status page, sharp black type, compact green health signals, quiet charts, small operational metadata, and playful cat identity used sparingly.; monitor health and regional response data working state; incident timeline and status communication working state; alert channel and monitor configuration working state.
- Required working interactions: monitor health and regional response data; incident timeline and status communication; alert channel and monitor configuration.
- Responsive behavior: Preserve the repository's real responsive navigation, pane collapse, table or canvas overflow, dialogs, keyboard behavior, loading, empty, error, and success states.
- Asset policy: Reuse assets already licensed and committed in the source repository. Do not replace the defining UI with the Foxora poster or invent stock media.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or its exact source tree.
- The official startup command reaches the real primary product route.
- The source navigation, terminology, controls, and core workflow remain recognizable and functional.
- No marketing hero, screenshot plate, or unrelated dashboard replaces the application.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "github-openstatus",
  "kind": "App",
  "source": "https://github.com/openstatusHQ/openstatus",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-github-openstatus.webp",
  "motion": null,
  "originalVisual": "https://www.openstatus.dev/assets/landing/statuspage-meow.png",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-3619B573

- Product domain: Uptime Monitoring application.
- Required root artifact: A faithful, responsive reconstruction of the OpenStatus primary product interface.
- Root view: OpenStatus primary product interface.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Calm cream status page, sharp black type, compact green health signals, quiet charts, small operational metadata, and playful cat identity used sparingly.
- Composition map: Match the cached application poster as one measured workspace. Preserve the original navigation, sidebars, toolbars, content panes, tables, cards, charts, forms, controls, data density, and active state without adding a marketing shell.
- Interaction or motion identity: Make the visible uptime monitoring workflow real and deterministic. Prioritize monitor health and regional response data, incident timeline and status communication, alert channel and monitor configuration, then add only the interactions implied by the source.
- Visible product entities: Uptime Monitoring; monitor health and regional response data; incident timeline and status communication; alert channel and monitor configuration; active workspace state.
- Signature moments that must survive: monitor health and regional response data; incident timeline and status communication; alert channel and monitor configuration.
- Forbidden drift: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- Required semantic cues: openstatus; uptime; monitoring; monitor; health.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: monitor health and regional response data.
- Silhouette and occupancy: Preserve the exact application shell, pane proportions, navigation density, dominant working surface, and visible active state.
- Material, palette, and contrast: Calm cream status page, sharp black type, compact green health signals, quiet charts, small operational metadata, and playful cat identity used sparingly.
- Motion or interaction: Implement only the transitions and state changes implied by monitor health and regional response data, incident timeline and status communication, alert channel and monitor configuration; keep the initial screenshot deterministic.
- Framing and negative space: Fill the viewport with the product interface exactly as shown, without an outer browser frame or promotional hero.
- Implementation requirement: Build a semantic application as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining monitor health and regional response data with a generic component, stock layout, or different product concept.

This is a faithful product-interface reconstruction, not a marketing website and not a screenshot plate. The normal root MUST be the real semantic application. Rebuild the visible chrome, navigation, controls, tables, charts, forms, data density, copy, and state. Do not rename the product, prepend a landing-page hero, create an unrelated dashboard, or add decorative marketing chrome.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/openstatusHQ/openstatus, preserve its source stack and existing component tree, and run its real primary product route. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement monitor health and regional response data as the dominant artifact.
5. Supporting reference cues: implement incident timeline and status communication; alert channel and monitor configuration.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'OpenStatus primary product interface'. The following may be implemented only after the root screenshot passes: monitor health and regional response data state; incident timeline and status communication state; alert channel and monitor configuration state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic uptime monitoring application data for Uptime Monitoring, monitor health and regional response data, incident timeline and status communication, alert channel and monitor configuration, active workspace state; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-github-openstatus.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably OpenStatus, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the openstatus primary product interface in the uptime monitoring application domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: monitor health and regional response data; incident timeline and status communication; alert channel and monitor configuration.
- None of the prohibited substitutes appear: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 25. AppFlowy

**Type:** App · **Category:** Collaborative Workspace · **Source:** [AppFlowy on GitHub](https://github.com/AppFlowy-IO/AppFlowy) · **Terms:** AGPL-3.0

A faithful, responsive reconstruction of the AppFlowy primary product interface. A privacy-first collaborative workspace combining documents, databases, tasks, templates, sites, and AI inside one deeply configurable product shell.

# Recreate this reference faithfully: AppFlowy

You are an expert creative front-end developer. Reproduce the referenced app so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `github-appflowy` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/AppFlowy-IO/AppFlowy as the starting codebase. Follow its README and lockfile; install and run the official application instead of producing a one-file visual imitation.
- Do not replace the source application with a self-contained `index.html`, screenshot recreation, or newly invented shell.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/github-appflowy/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-github-appflowy.webp

- Original reference visual: https://appflowy.com/_next/static/media/tasks.796c753e.png
- Exact source page: https://github.com/AppFlowy-IO/AppFlowy
- Source collection / creator library: https://appflowy.com/
- Source format: Flutter · Rust
- Creator credit: AppFlowy on GitHub
- Source terms recorded by Foxora: AGPL-3.0

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source repository.
- Exact implementation authority: https://github.com/AppFlowy-IO/AppFlowy
- Original listing and terms: https://github.com/AppFlowy-IO/AppFlowy
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact source repository as the implementation starting point. Inspect its README, lockfile, package scripts, environment example, route tree, and existing components before editing. Preserve the source stack and run the official application; do not redraw its poster in a new project.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: AppFlowy; Tasks; Grid; Sites; AI.
- Required layout zones: AppFlowy application shell; Soft gray workspace chrome, precise split panes, colored database properties, polished dark and light themes, rounded contextual controls, and dense editable content.; document and database workspace navigation working state; task board properties and view switching working state; collaboration, templates, and AI actions working state.
- Required working interactions: document and database workspace navigation; task board properties and view switching; collaboration, templates, and AI actions.
- Responsive behavior: Preserve the repository's real responsive navigation, pane collapse, table or canvas overflow, dialogs, keyboard behavior, loading, empty, error, and success states.
- Asset policy: Reuse assets already licensed and committed in the source repository. Do not replace the defining UI with the Foxora poster or invent stock media.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or its exact source tree.
- The official startup command reaches the real primary product route.
- The source navigation, terminology, controls, and core workflow remain recognizable and functional.
- No marketing hero, screenshot plate, or unrelated dashboard replaces the application.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "github-appflowy",
  "kind": "App",
  "source": "https://github.com/AppFlowy-IO/AppFlowy",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-github-appflowy.webp",
  "motion": null,
  "originalVisual": "https://appflowy.com/_next/static/media/tasks.796c753e.png",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-12D1B99F

- Product domain: Collaborative Workspace application.
- Required root artifact: A faithful, responsive reconstruction of the AppFlowy primary product interface.
- Root view: AppFlowy primary product interface.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Soft gray workspace chrome, precise split panes, colored database properties, polished dark and light themes, rounded contextual controls, and dense editable content.
- Composition map: Match the cached application poster as one measured workspace. Preserve the original navigation, sidebars, toolbars, content panes, tables, cards, charts, forms, controls, data density, and active state without adding a marketing shell.
- Interaction or motion identity: Make the visible collaborative workspace workflow real and deterministic. Prioritize document and database workspace navigation, task board properties and view switching, collaboration, templates, and AI actions, then add only the interactions implied by the source.
- Visible product entities: Collaborative Workspace; document and database workspace navigation; task board properties and view switching; collaboration, templates, and AI actions; active workspace state.
- Signature moments that must survive: document and database workspace navigation; task board properties and view switching; collaboration, templates, and AI actions.
- Forbidden drift: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- Required semantic cues: appflowy; collaborative; workspace; document; and.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: document and database workspace navigation.
- Silhouette and occupancy: Preserve the exact application shell, pane proportions, navigation density, dominant working surface, and visible active state.
- Material, palette, and contrast: Soft gray workspace chrome, precise split panes, colored database properties, polished dark and light themes, rounded contextual controls, and dense editable content.
- Motion or interaction: Implement only the transitions and state changes implied by document and database workspace navigation, task board properties and view switching, collaboration, templates, and AI actions; keep the initial screenshot deterministic.
- Framing and negative space: Fill the viewport with the product interface exactly as shown, without an outer browser frame or promotional hero.
- Implementation requirement: Build a semantic application as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining document and database workspace navigation with a generic component, stock layout, or different product concept.

This is a faithful product-interface reconstruction, not a marketing website and not a screenshot plate. The normal root MUST be the real semantic application. Rebuild the visible chrome, navigation, controls, tables, charts, forms, data density, copy, and state. Do not rename the product, prepend a landing-page hero, create an unrelated dashboard, or add decorative marketing chrome.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/AppFlowy-IO/AppFlowy, preserve its source stack and existing component tree, and run its real primary product route. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement document and database workspace navigation as the dominant artifact.
5. Supporting reference cues: implement task board properties and view switching; collaboration, templates, and AI actions.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'AppFlowy primary product interface'. The following may be implemented only after the root screenshot passes: document and database workspace navigation state; task board properties and view switching state; collaboration, templates, and AI actions state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic collaborative workspace application data for Collaborative Workspace, document and database workspace navigation, task board properties and view switching, collaboration, templates, and AI actions, active workspace state; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-github-appflowy.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably AppFlowy, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the appflowy primary product interface in the collaborative workspace application domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: document and database workspace navigation; task board properties and view switching; collaboration, templates, and AI actions.
- None of the prohibited substitutes appear: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 26. Chatwoot

**Type:** App · **Category:** Customer Support · **Source:** [Chatwoot on GitHub](https://github.com/chatwoot/chatwoot) · **Terms:** MIT Expat core · enterprise directory excluded

A faithful, responsive reconstruction of the Chatwoot primary product interface. A highly resolved support inbox with channel-aware conversations, team assignment, contact context, notes, macros, labels, automation, and AI-assisted operations.

# Recreate this reference faithfully: Chatwoot

You are an expert creative front-end developer. Reproduce the referenced app so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `github-chatwoot` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/chatwoot/chatwoot as the starting codebase. Follow its README and lockfile; install and run the official application instead of producing a one-file visual imitation.
- Do not replace the source application with a self-contained `index.html`, screenshot recreation, or newly invented shell.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/github-chatwoot/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-github-chatwoot.webp

- Original reference visual: https://raw.githubusercontent.com/chatwoot/chatwoot/develop/.github/screenshots/dashboard.png
- Exact source page: https://github.com/chatwoot/chatwoot
- Source collection / creator library: https://www.chatwoot.com/
- Source format: Vue · Ruby on Rails
- Creator credit: Chatwoot on GitHub
- Source terms recorded by Foxora: MIT Expat core · enterprise directory excluded

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source repository.
- Exact implementation authority: https://github.com/chatwoot/chatwoot
- Original listing and terms: https://github.com/chatwoot/chatwoot
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact source repository as the implementation starting point. Inspect its README, lockfile, package scripts, environment example, route tree, and existing components before editing. Preserve the source stack and run the official application; do not redraw its poster in a new project.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Conversations; Mine; Unassigned; Reply; Private Note.
- Required layout zones: Chatwoot application shell; Four-pane support workspace, bright neutral surfaces, cobalt active states, readable conversation bubbles, compact channel icons, and information-dense contact context.; multi-channel conversation queue working state; reply, note, assignment, and resolution workflow working state; contact context, labels, macros, and team controls working state.
- Required working interactions: multi-channel conversation queue; reply, note, assignment, and resolution workflow; contact context, labels, macros, and team controls.
- Responsive behavior: Preserve the repository's real responsive navigation, pane collapse, table or canvas overflow, dialogs, keyboard behavior, loading, empty, error, and success states.
- Asset policy: Reuse assets already licensed and committed in the source repository. Do not replace the defining UI with the Foxora poster or invent stock media.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or its exact source tree.
- The official startup command reaches the real primary product route.
- The source navigation, terminology, controls, and core workflow remain recognizable and functional.
- No marketing hero, screenshot plate, or unrelated dashboard replaces the application.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "github-chatwoot",
  "kind": "App",
  "source": "https://github.com/chatwoot/chatwoot",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-github-chatwoot.webp",
  "motion": null,
  "originalVisual": "https://raw.githubusercontent.com/chatwoot/chatwoot/develop/.github/screenshots/dashboard.png",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-53DB74B2

- Product domain: Customer Support application.
- Required root artifact: A faithful, responsive reconstruction of the Chatwoot primary product interface.
- Root view: Chatwoot primary product interface.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Four-pane support workspace, bright neutral surfaces, cobalt active states, readable conversation bubbles, compact channel icons, and information-dense contact context.
- Composition map: Match the cached application poster as one measured workspace. Preserve the original navigation, sidebars, toolbars, content panes, tables, cards, charts, forms, controls, data density, and active state without adding a marketing shell.
- Interaction or motion identity: Make the visible customer support workflow real and deterministic. Prioritize multi-channel conversation queue, reply, note, assignment, and resolution workflow, contact context, labels, macros, and team controls, then add only the interactions implied by the source.
- Visible product entities: Customer Support; multi-channel conversation queue; reply, note, assignment, and resolution workflow; contact context, labels, macros, and team controls; active workspace state.
- Signature moments that must survive: multi-channel conversation queue; reply, note, assignment, and resolution workflow; contact context, labels, macros, and team controls.
- Forbidden drift: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- Required semantic cues: chatwoot; customer; support; multi; channel.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: multi-channel conversation queue.
- Silhouette and occupancy: Preserve the exact application shell, pane proportions, navigation density, dominant working surface, and visible active state.
- Material, palette, and contrast: Four-pane support workspace, bright neutral surfaces, cobalt active states, readable conversation bubbles, compact channel icons, and information-dense contact context.
- Motion or interaction: Implement only the transitions and state changes implied by multi-channel conversation queue, reply, note, assignment, and resolution workflow, contact context, labels, macros, and team controls; keep the initial screenshot deterministic.
- Framing and negative space: Fill the viewport with the product interface exactly as shown, without an outer browser frame or promotional hero.
- Implementation requirement: Build a semantic application as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining multi-channel conversation queue with a generic component, stock layout, or different product concept.

This is a faithful product-interface reconstruction, not a marketing website and not a screenshot plate. The normal root MUST be the real semantic application. Rebuild the visible chrome, navigation, controls, tables, charts, forms, data density, copy, and state. Do not rename the product, prepend a landing-page hero, create an unrelated dashboard, or add decorative marketing chrome.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/chatwoot/chatwoot, preserve its source stack and existing component tree, and run its real primary product route. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement multi-channel conversation queue as the dominant artifact.
5. Supporting reference cues: implement reply, note, assignment, and resolution workflow; contact context, labels, macros, and team controls.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Chatwoot primary product interface'. The following may be implemented only after the root screenshot passes: multi-channel conversation queue state; reply, note, assignment, and resolution workflow state; contact context, labels, macros, and team controls state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic customer support application data for Customer Support, multi-channel conversation queue, reply, note, assignment, and resolution workflow, contact context, labels, macros, and team controls, active workspace state; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-github-chatwoot.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Chatwoot, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the chatwoot primary product interface in the customer support application domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: multi-channel conversation queue; reply, note, assignment, and resolution workflow; contact context, labels, macros, and team controls.
- None of the prohibited substitutes appear: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 27. Formbricks

**Type:** App · **Category:** Experience Management · **Source:** [Formbricks on GitHub](https://github.com/formbricks/formbricks) · **Terms:** AGPL-3.0 core · enterprise module excluded

A faithful, responsive reconstruction of the Formbricks primary product interface. A sophisticated survey and experience-management application with visual survey building, targeting, response analysis, segmentation, integrations, and team workflows.

# Recreate this reference faithfully: Formbricks

You are an expert creative front-end developer. Reproduce the referenced app so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `github-formbricks` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/formbricks/formbricks as the starting codebase. Follow its README and lockfile; install and run the official application instead of producing a one-file visual imitation.
- Do not replace the source application with a self-contained `index.html`, screenshot recreation, or newly invented shell.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/github-formbricks/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-github-formbricks.webp

- Original reference visual: https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png
- Exact source page: https://github.com/formbricks/formbricks
- Source collection / creator library: https://formbricks.com/
- Source format: Next.js · Prisma
- Creator credit: Formbricks on GitHub
- Source terms recorded by Foxora: AGPL-3.0 core · enterprise module excluded

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source repository.
- Exact implementation authority: https://github.com/formbricks/formbricks
- Original listing and terms: https://github.com/formbricks/formbricks
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact source repository as the implementation starting point. Inspect its README, lockfile, package scripts, environment example, route tree, and existing components before editing. Preserve the source stack and run the official application; do not redraw its poster in a new project.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Formbricks; Surveys; Responses; Summary.
- Required layout zones: Formbricks application shell; Warm neutral product shell, purple survey accent, compact sidebar, structured builder canvas, crisp response charts, and carefully layered configuration drawers.; visual survey builder and live preview working state; targeting, segmentation, and trigger rules working state; response analytics and team collaboration working state.
- Required working interactions: visual survey builder and live preview; targeting, segmentation, and trigger rules; response analytics and team collaboration.
- Responsive behavior: Preserve the repository's real responsive navigation, pane collapse, table or canvas overflow, dialogs, keyboard behavior, loading, empty, error, and success states.
- Asset policy: Reuse assets already licensed and committed in the source repository. Do not replace the defining UI with the Foxora poster or invent stock media.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or its exact source tree.
- The official startup command reaches the real primary product route.
- The source navigation, terminology, controls, and core workflow remain recognizable and functional.
- No marketing hero, screenshot plate, or unrelated dashboard replaces the application.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "github-formbricks",
  "kind": "App",
  "source": "https://github.com/formbricks/formbricks",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-github-formbricks.webp",
  "motion": null,
  "originalVisual": "https://github-production-user-asset-6210df.s3.amazonaws.com/675065/249441967-ccb89ea3-82b4-4bf2-8d2c-528721ec313b.png",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-7EA7D3E1

- Product domain: Experience Management application.
- Required root artifact: A faithful, responsive reconstruction of the Formbricks primary product interface.
- Root view: Formbricks primary product interface.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Warm neutral product shell, purple survey accent, compact sidebar, structured builder canvas, crisp response charts, and carefully layered configuration drawers.
- Composition map: Match the cached application poster as one measured workspace. Preserve the original navigation, sidebars, toolbars, content panes, tables, cards, charts, forms, controls, data density, and active state without adding a marketing shell.
- Interaction or motion identity: Make the visible experience management workflow real and deterministic. Prioritize visual survey builder and live preview, targeting, segmentation, and trigger rules, response analytics and team collaboration, then add only the interactions implied by the source.
- Visible product entities: Experience Management; visual survey builder and live preview; targeting, segmentation, and trigger rules; response analytics and team collaboration; active workspace state.
- Signature moments that must survive: visual survey builder and live preview; targeting, segmentation, and trigger rules; response analytics and team collaboration.
- Forbidden drift: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- Required semantic cues: formbricks; experience; management; visual; survey.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: visual survey builder and live preview.
- Silhouette and occupancy: Preserve the exact application shell, pane proportions, navigation density, dominant working surface, and visible active state.
- Material, palette, and contrast: Warm neutral product shell, purple survey accent, compact sidebar, structured builder canvas, crisp response charts, and carefully layered configuration drawers.
- Motion or interaction: Implement only the transitions and state changes implied by visual survey builder and live preview, targeting, segmentation, and trigger rules, response analytics and team collaboration; keep the initial screenshot deterministic.
- Framing and negative space: Fill the viewport with the product interface exactly as shown, without an outer browser frame or promotional hero.
- Implementation requirement: Build a semantic application as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining visual survey builder and live preview with a generic component, stock layout, or different product concept.

This is a faithful product-interface reconstruction, not a marketing website and not a screenshot plate. The normal root MUST be the real semantic application. Rebuild the visible chrome, navigation, controls, tables, charts, forms, data density, copy, and state. Do not rename the product, prepend a landing-page hero, create an unrelated dashboard, or add decorative marketing chrome.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/formbricks/formbricks, preserve its source stack and existing component tree, and run its real primary product route. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement visual survey builder and live preview as the dominant artifact.
5. Supporting reference cues: implement targeting, segmentation, and trigger rules; response analytics and team collaboration.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Formbricks primary product interface'. The following may be implemented only after the root screenshot passes: visual survey builder and live preview state; targeting, segmentation, and trigger rules state; response analytics and team collaboration state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic experience management application data for Experience Management, visual survey builder and live preview, targeting, segmentation, and trigger rules, response analytics and team collaboration, active workspace state; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-github-formbricks.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Formbricks, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the formbricks primary product interface in the experience management application domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: visual survey builder and live preview; targeting, segmentation, and trigger rules; response analytics and team collaboration.
- None of the prohibited substitutes appear: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 28. Twenty

**Type:** App · **Category:** CRM · **Source:** [Twenty on GitHub](https://github.com/twentyhq/twenty) · **Terms:** AGPL-3.0 core · enterprise-marked files excluded

A faithful, responsive reconstruction of the Twenty primary product interface. A carefully designed open CRM with people, companies, opportunities, customizable objects, views, workflows, command surfaces, and keyboard-first data operations.

# Recreate this reference faithfully: Twenty

You are an expert creative front-end developer. Reproduce the referenced app so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `github-twenty` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/twentyhq/twenty as the starting codebase. Follow its README and lockfile; install and run the official application instead of producing a one-file visual imitation.
- Do not replace the source application with a self-contained `index.html`, screenshot recreation, or newly invented shell.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/github-twenty/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/curated-github-twenty.webp

- Original reference visual: https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-website/public/images/readme/github-cover-light.webp
- Exact source page: https://github.com/twentyhq/twenty
- Source collection / creator library: https://twenty.com/
- Source format: React · NestJS
- Creator credit: Twenty on GitHub
- Source terms recorded by Foxora: AGPL-3.0 core · enterprise-marked files excluded

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source repository.
- Exact implementation authority: https://github.com/twentyhq/twenty
- Original listing and terms: https://github.com/twentyhq/twenty
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact source repository as the implementation starting point. Inspect its README, lockfile, package scripts, environment example, route tree, and existing components before editing. Preserve the source stack and run the official application; do not redraw its poster in a new project.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Twenty; People; Companies; Opportunities; Workflows.
- Required layout zones: Twenty application shell; Quiet white data canvas, compact object navigation, precise table and kanban density, soft gray surfaces, tiny colored record accents, and polished command interactions.; customizable CRM object navigation working state; table, kanban, record, and relation views working state; command menu, workflows, and keyboard operations working state.
- Required working interactions: customizable CRM object navigation; table, kanban, record, and relation views; command menu, workflows, and keyboard operations.
- Responsive behavior: Preserve the repository's real responsive navigation, pane collapse, table or canvas overflow, dialogs, keyboard behavior, loading, empty, error, and success states.
- Asset policy: Reuse assets already licensed and committed in the source repository. Do not replace the defining UI with the Foxora poster or invent stock media.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or its exact source tree.
- The official startup command reaches the real primary product route.
- The source navigation, terminology, controls, and core workflow remain recognizable and functional.
- No marketing hero, screenshot plate, or unrelated dashboard replaces the application.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "github-twenty",
  "kind": "App",
  "source": "https://github.com/twentyhq/twenty",
  "poster": "https://showcase.foxora.studio/thumbnails/curated-github-twenty.webp",
  "motion": null,
  "originalVisual": "https://raw.githubusercontent.com/twentyhq/twenty/main/packages/twenty-website/public/images/readme/github-cover-light.webp",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 960,
    "height": 610,
    "aspectRatio": 1.5738
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-049D4CD0

- Product domain: CRM application.
- Required root artifact: A faithful, responsive reconstruction of the Twenty primary product interface.
- Root view: Twenty primary product interface.
- Native Foxora capture: 960 × 610px, aspect ratio 1.5738.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Quiet white data canvas, compact object navigation, precise table and kanban density, soft gray surfaces, tiny colored record accents, and polished command interactions.
- Composition map: Match the cached application poster as one measured workspace. Preserve the original navigation, sidebars, toolbars, content panes, tables, cards, charts, forms, controls, data density, and active state without adding a marketing shell.
- Interaction or motion identity: Make the visible crm workflow real and deterministic. Prioritize customizable CRM object navigation, table, kanban, record, and relation views, command menu, workflows, and keyboard operations, then add only the interactions implied by the source.
- Visible product entities: CRM; customizable CRM object navigation; table, kanban, record, and relation views; command menu, workflows, and keyboard operations; active workspace state.
- Signature moments that must survive: customizable CRM object navigation; table, kanban, record, and relation views; command menu, workflows, and keyboard operations.
- Forbidden drift: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- Required semantic cues: twenty; crm; customizable.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: customizable CRM object navigation.
- Silhouette and occupancy: Preserve the exact application shell, pane proportions, navigation density, dominant working surface, and visible active state.
- Material, palette, and contrast: Quiet white data canvas, compact object navigation, precise table and kanban density, soft gray surfaces, tiny colored record accents, and polished command interactions.
- Motion or interaction: Implement only the transitions and state changes implied by customizable CRM object navigation, table, kanban, record, and relation views, command menu, workflows, and keyboard operations; keep the initial screenshot deterministic.
- Framing and negative space: Fill the viewport with the product interface exactly as shown, without an outer browser frame or promotional hero.
- Implementation requirement: Build a semantic application as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining customizable CRM object navigation with a generic component, stock layout, or different product concept.

This is a faithful product-interface reconstruction, not a marketing website and not a screenshot plate. The normal root MUST be the real semantic application. Rebuild the visible chrome, navigation, controls, tables, charts, forms, data density, copy, and state. Do not rename the product, prepend a landing-page hero, create an unrelated dashboard, or add decorative marketing chrome.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/twentyhq/twenty, preserve its source stack and existing component tree, and run its real primary product route. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 960 × 610px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 960 × 610px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement customizable CRM object navigation as the dominant artifact.
5. Supporting reference cues: implement table, kanban, record, and relation views; command menu, workflows, and keyboard operations.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Twenty primary product interface'. The following may be implemented only after the root screenshot passes: customizable CRM object navigation state; table, kanban, record, and relation views state; command menu, workflows, and keyboard operations state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic crm application data for CRM, customizable CRM object navigation, table, kanban, record, and relation views, command menu, workflows, and keyboard operations, active workspace state; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 960 × 610px and compare side by side with https://showcase.foxora.studio/thumbnails/curated-github-twenty.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Twenty, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the twenty primary product interface in the crm application domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: customizable CRM object navigation; table, kanban, record, and relation views; command menu, workflows, and keyboard operations.
- None of the prohibited substitutes appear: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 29. Sol

**Type:** Website · **Category:** Portfolio · **Source:** [Akim on Framer](https://www.framer.com/community/marketplace/templates/sol/) · **Terms:** Free · Framer Limited License

A faithful, responsive reconstruction of the Sol homepage hero and first-fold transition. A sleek multi-page portfolio and agency system with CMS case studies, strong typography, and polished transitions.

# Recreate this reference faithfully: Sol

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `sol` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, produce a maintainable semantic implementation at '/'. A self-contained `index.html` is acceptable for the first-fold reconstruction when it preserves the exact live template behavior.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/sol/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/sol.webp

- Original reference visual: https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/47044/sol-JNTrrL3BXXX73kJlQlAe46dcDCIITI
- Exact source page: https://www.framer.com/community/marketplace/templates/sol/

- Source format: Framer
- Creator credit: Akim on Framer
- Source terms recorded by Foxora: Free · Framer Limited License

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: live cloneable website.
- Exact implementation authority: https://solagency.framer.website/
- Original listing and terms: https://www.framer.com/community/marketplace/templates/sol/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Open the exact live URL at desktop and mobile widths before coding. Recreate its real DOM, copy geometry, media crop, scroll order, hover behavior, and first-fold transition. The marketplace thumbnail is only a comparison reference.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Design so good, it should come with a warning label; Sol Studio; Home; About; Work; Say hi.
- Required layout zones: Sol - Framer Agency Template navigation; Design so good, it should come with a warning label hero copy; Monochrome editorial layouts, oversized typography, restrained motion, and image-led project storytelling.; first visible case-study storytelling transition.
- Required working interactions: Say hi; case-study storytelling; service positioning; high-intent contact conversion.
- Responsive behavior: Inspect the exact live template at 1440x900, 768x1024, and 390x844. Preserve its real breakpoint behavior, navigation transformation, typography wrapping, media crop, overlap, and section order.
- Asset policy: Use only media that is publicly delivered by the exact live cloneable and permitted by its source terms. Keep the Foxora poster out of the normal root.
- Captured palette: white canvas; black typography.

### Authority acceptance checks

- The normal root matches https://solagency.framer.website/, not merely the same design category.
- The first fold contains the captured copy: Design so good, it should come with a warning label.
- Navigation preserves: Sol Studio / Home / About / Work / Say hi.
- The real first-fold controls, hover states, and responsive navigation work.
- No poster, screenshot, iframe, or generic substitute covers the reconstruction.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "sol",
  "kind": "Website",
  "source": "https://www.framer.com/community/marketplace/templates/sol/",
  "poster": "https://showcase.foxora.studio/thumbnails/sol.webp",
  "motion": null,
  "originalVisual": "https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/47044/sol-JNTrrL3BXXX73kJlQlAe46dcDCIITI",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 1050,
    "aspectRatio": 1.3333
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-E2363DA1

- Product domain: Portfolio website.
- Required root artifact: A faithful, responsive reconstruction of the Sol homepage hero and first-fold transition.
- Root view: Sol homepage hero and first-fold transition.
- Native Foxora capture: 1400 × 1050px, aspect ratio 1.3333.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Monochrome editorial layouts, oversized typography, restrained motion, and image-led project storytelling.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible portfolio workflow real and deterministic. Prioritize case-study storytelling, service positioning, high-intent contact conversion, then add only the interactions implied by the source.
- Visible product entities: Portfolio; case-study storytelling; service positioning; high-intent contact conversion; primary call to action.
- Signature moments that must survive: case-study storytelling; service positioning; high-intent contact conversion.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: sol; portfolio; case; study.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: case-study storytelling.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Monochrome editorial layouts, oversized typography, restrained motion, and image-led project storytelling.
- Motion or interaction: Implement only the transitions and state changes implied by case-study storytelling, service positioning, high-intent contact conversion; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining case-study storytelling with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Build the real semantic website from the exact live authority https://solagency.framer.website/. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 1050px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 1050px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement case-study storytelling as the dominant artifact.
5. Supporting reference cues: implement service positioning; high-intent contact conversion.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Sol homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: case-study storytelling state; service positioning state; high-intent contact conversion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic portfolio website data for Portfolio, case-study storytelling, service positioning, high-intent contact conversion, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 1050px and compare side by side with https://showcase.foxora.studio/thumbnails/sol.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Sol, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the sol homepage hero and first-fold transition in the portfolio website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: case-study storytelling; service positioning; high-intent contact conversion.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 30. Creativ Axis

**Type:** Website · **Category:** Creative Studio · **Source:** [Flexbuildr on Framer](https://www.framer.com/community/marketplace/templates/creativ-axis/) · **Terms:** Free · Framer Limited License

A faithful, responsive reconstruction of the Creativ Axis homepage hero and first-fold transition. A one-page creative studio template with a video hero, rotating services, project hovers, testimonials, and contact conversion.

# Recreate this reference faithfully: Creativ Axis

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `creativ-axis` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, produce a maintainable semantic implementation at '/'. A self-contained `index.html` is acceptable for the first-fold reconstruction when it preserves the exact live template behavior.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/creativ-axis/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/creativ-axis.webp

- Original reference visual: https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/57651/creativ-axis-DYZvuYCwWT7C1ImejXGCrjAsDHckeB
- Exact source page: https://www.framer.com/community/marketplace/templates/creativ-axis/

- Source format: Framer
- Creator credit: Flexbuildr on Framer
- Source terms recorded by Foxora: Free · Framer Limited License

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: live cloneable website.
- Exact implementation authority: https://creativeaxis.framer.website/
- Original listing and terms: https://www.framer.com/community/marketplace/templates/creativ-axis/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Open the exact live URL at desktop and mobile widths before coding. Recreate its real DOM, copy geometry, media crop, scroll order, hover behavior, and first-fold transition. The marketplace thumbnail is only a comparison reference.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Craft Exceptional UI/UX Boost Conversions and Business Growth; Creative Axis; Contact Now.
- Required layout zones: Creative Axis - Best UI/UX Design Agency navigation; Craft Exceptional UI/UX Boost Conversions and Business Growth hero copy; Deep green surfaces, premium editorial type, animated service rails, and tactile project hover states.; first visible one-page narrative transition.
- Required working interactions: Contact Now; one-page narrative; interactive service showcase; portfolio-to-contact flow.
- Responsive behavior: Inspect the exact live template at 1440x900, 768x1024, and 390x844. Preserve its real breakpoint behavior, navigation transformation, typography wrapping, media crop, overlap, and section order.
- Asset policy: Use only media that is publicly delivered by the exact live cloneable and permitted by its source terms. Keep the Foxora poster out of the normal root.
- Captured palette: deep green #091c17 canvas; light editorial typography.

### Authority acceptance checks

- The normal root matches https://creativeaxis.framer.website/, not merely the same design category.
- The first fold contains the captured copy: Craft Exceptional UI/UX Boost Conversions and Business Growth.
- Navigation preserves: Creative Axis / Contact Now.
- The real first-fold controls, hover states, and responsive navigation work.
- No poster, screenshot, iframe, or generic substitute covers the reconstruction.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "creativ-axis",
  "kind": "Website",
  "source": "https://www.framer.com/community/marketplace/templates/creativ-axis/",
  "poster": "https://showcase.foxora.studio/thumbnails/creativ-axis.webp",
  "motion": null,
  "originalVisual": "https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/57651/creativ-axis-DYZvuYCwWT7C1ImejXGCrjAsDHckeB",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 1050,
    "aspectRatio": 1.3333
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-0405C791

- Product domain: Creative Studio website.
- Required root artifact: A faithful, responsive reconstruction of the Creativ Axis homepage hero and first-fold transition.
- Root view: Creativ Axis homepage hero and first-fold transition.
- Native Foxora capture: 1400 × 1050px, aspect ratio 1.3333.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Deep green surfaces, premium editorial type, animated service rails, and tactile project hover states.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible creative studio workflow real and deterministic. Prioritize one-page narrative, interactive service showcase, portfolio-to-contact flow, then add only the interactions implied by the source.
- Visible product entities: Creative Studio; one-page narrative; interactive service showcase; portfolio-to-contact flow; primary call to action.
- Signature moments that must survive: one-page narrative; interactive service showcase; portfolio-to-contact flow.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: creativ; axis; creative; studio; one; page.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: one-page narrative.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Deep green surfaces, premium editorial type, animated service rails, and tactile project hover states.
- Motion or interaction: Implement only the transitions and state changes implied by one-page narrative, interactive service showcase, portfolio-to-contact flow; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining one-page narrative with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Build the real semantic website from the exact live authority https://creativeaxis.framer.website/. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 1050px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 1050px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement one-page narrative as the dominant artifact.
5. Supporting reference cues: implement interactive service showcase; portfolio-to-contact flow.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Creativ Axis homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: one-page narrative state; interactive service showcase state; portfolio-to-contact flow state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic creative studio website data for Creative Studio, one-page narrative, interactive service showcase, portfolio-to-contact flow, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 1050px and compare side by side with https://showcase.foxora.studio/thumbnails/creativ-axis.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Creativ Axis, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the creativ axis homepage hero and first-fold transition in the creative studio website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: one-page narrative; interactive service showcase; portfolio-to-contact flow.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 31. Agenciy

**Type:** Website · **Category:** AI Agency · **Source:** [NFrame on Framer](https://www.framer.com/community/marketplace/templates/agenciy/) · **Terms:** Free · Framer Limited License

A faithful, responsive reconstruction of the Agenciy homepage hero and first-fold transition. A modern AI and automation agency site with services, solutions, project proof, CMS content, and lead-generation structure.

# Recreate this reference faithfully: Agenciy

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `agenciy` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, produce a maintainable semantic implementation at '/'. A self-contained `index.html` is acceptable for the first-fold reconstruction when it preserves the exact live template behavior.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/agenciy/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/agenciy.webp

- Original reference visual: https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/56191/agenciy-aIgSDo7zNPtj2vNvO0KgfAyrp3mg8z
- Exact source page: https://www.framer.com/community/marketplace/templates/agenciy/

- Source format: Framer
- Creator credit: NFrame on Framer
- Source terms recorded by Foxora: Free · Framer Limited License

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: live cloneable website.
- Exact implementation authority: https://agenciy.framer.website/
- Original listing and terms: https://www.framer.com/community/marketplace/templates/agenciy/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Open the exact live URL at desktop and mobile widths before coding. Recreate its real DOM, copy geometry, media crop, scroll order, hover behavior, and first-fold transition. The marketplace thumbnail is only a comparison reference.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Create,; Impactful; What; We Do; Services; About; Projects; Blog; Contact; Let's Chat!.
- Required layout zones: Agenciy - Modern Template for Creative Agencies navigation; Create, / Impactful / What / We Do hero copy; Dark technical canvas, luminous highlights, precise grid lines, and polished scroll-driven storytelling.; first visible AI service clarity transition.
- Required working interactions: Let's Chat!; AI service clarity; automation case studies; consultation conversion.
- Responsive behavior: Inspect the exact live template at 1440x900, 768x1024, and 390x844. Preserve its real breakpoint behavior, navigation transformation, typography wrapping, media crop, overlap, and section order.
- Asset policy: Use only media that is publicly delivered by the exact live cloneable and permitted by its source terms. Keep the Foxora poster out of the normal root.
- Captured palette: black canvas; white type; luminous project media.

### Authority acceptance checks

- The normal root matches https://agenciy.framer.website/, not merely the same design category.
- The first fold contains the captured copy: Create, / Impactful / What / We Do.
- Navigation preserves: Services / About / Projects / Blog / Contact / Let's Chat!.
- The real first-fold controls, hover states, and responsive navigation work.
- No poster, screenshot, iframe, or generic substitute covers the reconstruction.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "agenciy",
  "kind": "Website",
  "source": "https://www.framer.com/community/marketplace/templates/agenciy/",
  "poster": "https://showcase.foxora.studio/thumbnails/agenciy.webp",
  "motion": null,
  "originalVisual": "https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/56191/agenciy-aIgSDo7zNPtj2vNvO0KgfAyrp3mg8z",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 1050,
    "aspectRatio": 1.3333
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-C58EAD71

- Product domain: AI Agency website.
- Required root artifact: A faithful, responsive reconstruction of the Agenciy homepage hero and first-fold transition.
- Root view: Agenciy homepage hero and first-fold transition.
- Native Foxora capture: 1400 × 1050px, aspect ratio 1.3333.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Dark technical canvas, luminous highlights, precise grid lines, and polished scroll-driven storytelling.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible ai agency workflow real and deterministic. Prioritize AI service clarity, automation case studies, consultation conversion, then add only the interactions implied by the source.
- Visible product entities: AI Agency; AI service clarity; automation case studies; consultation conversion; primary call to action.
- Signature moments that must survive: AI service clarity; automation case studies; consultation conversion.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: agenciy; agency; service; clarity.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: AI service clarity.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Dark technical canvas, luminous highlights, precise grid lines, and polished scroll-driven storytelling.
- Motion or interaction: Implement only the transitions and state changes implied by AI service clarity, automation case studies, consultation conversion; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining AI service clarity with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Build the real semantic website from the exact live authority https://agenciy.framer.website/. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 1050px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 1050px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement AI service clarity as the dominant artifact.
5. Supporting reference cues: implement automation case studies; consultation conversion.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Agenciy homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: AI service clarity state; automation case studies state; consultation conversion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic ai agency website data for AI Agency, AI service clarity, automation case studies, consultation conversion, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 1050px and compare side by side with https://showcase.foxora.studio/thumbnails/agenciy.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Agenciy, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the agenciy homepage hero and first-fold transition in the ai agency website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: AI service clarity; automation case studies; consultation conversion.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 32. Brandt

**Type:** Website · **Category:** Designer Portfolio · **Source:** [Svaco on Framer](https://www.framer.com/marketplace/templates/brandt/) · **Terms:** Free · Framer Limited License

A faithful, responsive reconstruction of the Brandt homepage hero and first-fold transition. A service-first portfolio for SaaS and B2B designers, with metrics-led case studies and built-in objection handling.

# Recreate this reference faithfully: Brandt

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `brandt` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, produce a maintainable semantic implementation at '/'. A self-contained `index.html` is acceptable for the first-fold reconstruction when it preserves the exact live template behavior.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/brandt/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/brandt.webp

- Original reference visual: https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/60162/brandt-2ZGKQdSZMKD2fueo7HMWp8nFKgy0sx
- Exact source page: https://www.framer.com/marketplace/templates/brandt/

- Source format: Framer
- Creator credit: Svaco on Framer
- Source terms recorded by Foxora: Free · Framer Limited License

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: live cloneable website.
- Exact implementation authority: https://brandt.framer.website/
- Original listing and terms: https://www.framer.com/marketplace/templates/brandt/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Open the exact live URL at desktop and mobile widths before coding. Recreate its real DOM, copy geometry, media crop, scroll order, hover behavior, and first-fold transition. The marketplace thumbnail is only a comparison reference.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: I help SaaS and B2B teams increase sign-ups, demos, and conversions through clear positioning and proven layouts.; BRANDT®; Projects,; About,; Contact; Book a call.
- Required layout zones: Brandt - Portfolio site for SaaS designers navigation; I help SaaS and B2B teams increase sign-ups, demos, and conversions through clear positioning and proven layouts. hero copy; Minimal typography, strict modular grids, crisp case-study media, and an understated professional palette.; first visible strategic positioning transition.
- Required working interactions: Book a call; strategic positioning; metrics-led case studies; lead qualification.
- Responsive behavior: Inspect the exact live template at 1440x900, 768x1024, and 390x844. Preserve its real breakpoint behavior, navigation transformation, typography wrapping, media crop, overlap, and section order.
- Asset policy: Use only media that is publicly delivered by the exact live cloneable and permitted by its source terms. Keep the Foxora poster out of the normal root.
- Captured palette: white canvas; black type; neutral product mockups.

### Authority acceptance checks

- The normal root matches https://brandt.framer.website/, not merely the same design category.
- The first fold contains the captured copy: I help SaaS and B2B teams increase sign-ups, demos, and conversions through clear positioning and proven layouts..
- Navigation preserves: BRANDT® / Projects, / About, / Contact / Book a call.
- The real first-fold controls, hover states, and responsive navigation work.
- No poster, screenshot, iframe, or generic substitute covers the reconstruction.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "brandt",
  "kind": "Website",
  "source": "https://www.framer.com/marketplace/templates/brandt/",
  "poster": "https://showcase.foxora.studio/thumbnails/brandt.webp",
  "motion": null,
  "originalVisual": "https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/60162/brandt-2ZGKQdSZMKD2fueo7HMWp8nFKgy0sx",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 1050,
    "aspectRatio": 1.3333
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-B87EEDA6

- Product domain: Designer Portfolio website.
- Required root artifact: A faithful, responsive reconstruction of the Brandt homepage hero and first-fold transition.
- Root view: Brandt homepage hero and first-fold transition.
- Native Foxora capture: 1400 × 1050px, aspect ratio 1.3333.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Minimal typography, strict modular grids, crisp case-study media, and an understated professional palette.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible designer portfolio workflow real and deterministic. Prioritize strategic positioning, metrics-led case studies, lead qualification, then add only the interactions implied by the source.
- Visible product entities: Designer Portfolio; strategic positioning; metrics-led case studies; lead qualification; primary call to action.
- Signature moments that must survive: strategic positioning; metrics-led case studies; lead qualification.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: brandt; designer; portfolio; strategic; positioning.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: strategic positioning.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Minimal typography, strict modular grids, crisp case-study media, and an understated professional palette.
- Motion or interaction: Implement only the transitions and state changes implied by strategic positioning, metrics-led case studies, lead qualification; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining strategic positioning with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Build the real semantic website from the exact live authority https://brandt.framer.website/. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 1050px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 1050px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement strategic positioning as the dominant artifact.
5. Supporting reference cues: implement metrics-led case studies; lead qualification.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Brandt homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: strategic positioning state; metrics-led case studies state; lead qualification state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic designer portfolio website data for Designer Portfolio, strategic positioning, metrics-led case studies, lead qualification, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 1050px and compare side by side with https://showcase.foxora.studio/thumbnails/brandt.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Brandt, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the brandt homepage hero and first-fold transition in the designer portfolio website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: strategic positioning; metrics-led case studies; lead qualification.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 33. JORGE

**Type:** Website · **Category:** Personal · **Source:** [Ludovic Losco on Framer](https://www.framer.com/community/marketplace/templates/jorge/) · **Terms:** Free · Framer Limited License

A faithful, responsive reconstruction of the JORGE homepage hero and first-fold transition. An expressive personal portfolio that uses bold type, playful composition, and compact project narratives.

# Recreate this reference faithfully: JORGE

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `jorge` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, produce a maintainable semantic implementation at '/'. A self-contained `index.html` is acceptable for the first-fold reconstruction when it preserves the exact live template behavior.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/jorge/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/jorge.webp

- Original reference visual: https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/52947/jorge-75PPjdDLxnPdMZKpu2pyaW4kZEuKbw
- Exact source page: https://www.framer.com/community/marketplace/templates/jorge/

- Source format: Framer
- Creator credit: Ludovic Losco on Framer
- Source terms recorded by Foxora: Free · Framer Limited License

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: live cloneable website.
- Exact implementation authority: https://jorge-template.framer.website/
- Original listing and terms: https://www.framer.com/community/marketplace/templates/jorge/
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Open the exact live URL at desktop and mobile widths before coding. Recreate its real DOM, copy geometry, media crop, scroll order, hover behavior, and first-fold transition. The marketplace thumbnail is only a comparison reference.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: JORGE GUERRERO; SELECTED WORKS; JORGE©; HOME; WORKS; ARCHIVES; CONTACT.
- Required layout zones: JORGE - Free Portfolio Template for Framer navigation; JORGE GUERRERO / SELECTED WORKS hero copy; Graphic display type, high contrast, deliberately irregular composition, and punchy color moments.; first visible personal voice transition.
- Required working interactions: project links; contact navigation; personal voice; selected work; memorable first impression.
- Responsive behavior: Inspect the exact live template at 1440x900, 768x1024, and 390x844. Preserve its real breakpoint behavior, navigation transformation, typography wrapping, media crop, overlap, and section order.
- Asset policy: Use only media that is publicly delivered by the exact live cloneable and permitted by its source terms. Keep the Foxora poster out of the normal root.
- Captured palette: near-black #0f0f0f canvas; white graphic type.

### Authority acceptance checks

- The normal root matches https://jorge-template.framer.website/, not merely the same design category.
- The first fold contains the captured copy: JORGE GUERRERO / SELECTED WORKS.
- Navigation preserves: JORGE© / HOME / WORKS / ARCHIVES / CONTACT.
- The real first-fold controls, hover states, and responsive navigation work.
- No poster, screenshot, iframe, or generic substitute covers the reconstruction.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "jorge",
  "kind": "Website",
  "source": "https://www.framer.com/community/marketplace/templates/jorge/",
  "poster": "https://showcase.foxora.studio/thumbnails/jorge.webp",
  "motion": null,
  "originalVisual": "https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/52947/jorge-75PPjdDLxnPdMZKpu2pyaW4kZEuKbw",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 1050,
    "aspectRatio": 1.3333
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-3170B31C

- Product domain: Personal website.
- Required root artifact: A faithful, responsive reconstruction of the JORGE homepage hero and first-fold transition.
- Root view: JORGE homepage hero and first-fold transition.
- Native Foxora capture: 1400 × 1050px, aspect ratio 1.3333.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Graphic display type, high contrast, deliberately irregular composition, and punchy color moments.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible personal workflow real and deterministic. Prioritize personal voice, selected work, memorable first impression, then add only the interactions implied by the source.
- Visible product entities: Personal; personal voice; selected work; memorable first impression; primary call to action.
- Signature moments that must survive: personal voice; selected work; memorable first impression.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: jorge; personal; voice.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: personal voice.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Graphic display type, high contrast, deliberately irregular composition, and punchy color moments.
- Motion or interaction: Implement only the transitions and state changes implied by personal voice, selected work, memorable first impression; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining personal voice with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Build the real semantic website from the exact live authority https://jorge-template.framer.website/. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 1050px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 1050px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement personal voice as the dominant artifact.
5. Supporting reference cues: implement selected work; memorable first impression.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'JORGE homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: personal voice state; selected work state; memorable first impression state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic personal website data for Personal, personal voice, selected work, memorable first impression, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 1050px and compare side by side with https://showcase.foxora.studio/thumbnails/jorge.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably JORGE, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the jorge homepage hero and first-fold transition in the personal website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: personal voice; selected work; memorable first impression.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 34. Homely

**Type:** Website · **Category:** Ecommerce · **Source:** [Digital Butlers on Webflow](https://webflow.com/made-in-webflow/website/homely-db) · **Terms:** Free cloneable · creator terms

A faithful, responsive reconstruction of the Homely homepage hero and first-fold transition. A free-to-copy home goods landing page with product storytelling, warm materials, loading animation, and a custom scrollbar.

# Recreate this reference faithfully: Homely

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `homely` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, produce a maintainable semantic implementation at '/'. A self-contained `index.html` is acceptable for the first-fold reconstruction when it preserves the exact live template behavior.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/homely/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/homely.webp

- Original reference visual: https://screenshots.webflow.com/sites/62132ccc8dd56d988e0fd9e6/20220831113938_5ee8764fe78cc330521ca7bf6430388f.png
- Exact source page: https://webflow.com/made-in-webflow/website/homely-db

- Source format: Webflow
- Creator credit: Digital Butlers on Webflow
- Source terms recorded by Foxora: Free cloneable · creator terms

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: live cloneable website.
- Exact implementation authority: https://homely-db.webflow.io/
- Original listing and terms: https://webflow.com/made-in-webflow/website/homely-db
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Open the exact live URL at desktop and mobile widths before coding. Recreate its real DOM, copy geometry, media crop, scroll order, hover behavior, and first-fold transition. The marketplace thumbnail is only a comparison reference.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: BED LINEN & ACCESSORIES for A PERFECT SLEEP; ABOUT; CATALOG; ABOUT US; REWIEVS; CONTACTS.
- Required layout zones: Homely - Free Webflow Landing Page Template navigation; BED LINEN & ACCESSORIES for A PERFECT SLEEP / ABOUT hero copy; Warm brown palette, editorial product photography, soft serif typography, and tactile scrolling.; first visible material storytelling transition.
- Required working interactions: catalog navigation; contact link; material storytelling; product collection; purchase intent.
- Responsive behavior: Inspect the exact live template at 1440x900, 768x1024, and 390x844. Preserve its real breakpoint behavior, navigation transformation, typography wrapping, media crop, overlap, and section order.
- Asset policy: Use only media that is publicly delivered by the exact live cloneable and permitted by its source terms. Keep the Foxora poster out of the normal root.
- Captured palette: warm #f3eeeb canvas; brown #402103 type.

### Authority acceptance checks

- The normal root matches https://homely-db.webflow.io/, not merely the same design category.
- The first fold contains the captured copy: BED LINEN & ACCESSORIES for A PERFECT SLEEP / ABOUT.
- Navigation preserves: CATALOG / ABOUT US / REWIEVS / CONTACTS.
- The real first-fold controls, hover states, and responsive navigation work.
- No poster, screenshot, iframe, or generic substitute covers the reconstruction.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "homely",
  "kind": "Website",
  "source": "https://webflow.com/made-in-webflow/website/homely-db",
  "poster": "https://showcase.foxora.studio/thumbnails/homely.webp",
  "motion": null,
  "originalVisual": "https://screenshots.webflow.com/sites/62132ccc8dd56d988e0fd9e6/20220831113938_5ee8764fe78cc330521ca7bf6430388f.png",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 933,
    "aspectRatio": 1.5005
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-2BFB97AD

- Product domain: Ecommerce website.
- Required root artifact: A faithful, responsive reconstruction of the Homely homepage hero and first-fold transition.
- Root view: Homely homepage hero and first-fold transition.
- Native Foxora capture: 1400 × 933px, aspect ratio 1.5005.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Warm brown palette, editorial product photography, soft serif typography, and tactile scrolling.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible ecommerce workflow real and deterministic. Prioritize material storytelling, product collection, purchase intent, then add only the interactions implied by the source.
- Visible product entities: Ecommerce; material storytelling; product collection; purchase intent; primary call to action.
- Signature moments that must survive: material storytelling; product collection; purchase intent.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: homely; ecommerce; material; storytelling.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: material storytelling.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Warm brown palette, editorial product photography, soft serif typography, and tactile scrolling.
- Motion or interaction: Implement only the transitions and state changes implied by material storytelling, product collection, purchase intent; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining material storytelling with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Build the real semantic website from the exact live authority https://homely-db.webflow.io/. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 933px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 933px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement material storytelling as the dominant artifact.
5. Supporting reference cues: implement product collection; purchase intent.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Homely homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: material storytelling state; product collection state; purchase intent state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic ecommerce website data for Ecommerce, material storytelling, product collection, purchase intent, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 933px and compare side by side with https://showcase.foxora.studio/thumbnails/homely.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Homely, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the homely homepage hero and first-fold transition in the ecommerce website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: material storytelling; product collection; purchase intent.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 35. SION

**Type:** Website · **Category:** Mobility · **Source:** [Jonas Arleth on Webflow](https://webflow.com/made-in-webflow/website/sion-car) · **Terms:** Free cloneable · creator terms

A faithful, responsive reconstruction of the SION homepage hero and first-fold transition. A free automotive startup template that combines technical specifications, cinematic product imagery, and a waitlist path.

# Recreate this reference faithfully: SION

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `sion` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, produce a maintainable semantic implementation at '/'. A self-contained `index.html` is acceptable for the first-fold reconstruction when it preserves the exact live template behavior.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/sion/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/sion.webp

- Original reference visual: https://uploads-ssl.webflow.com/63cf96b94c1db31c0bce9013/63da3d8446c58003a2ab213c_sion-webflow-showcase-webflow-showcase.jpg
- Exact source page: https://webflow.com/made-in-webflow/website/sion-car

- Source format: Webflow
- Creator credit: Jonas Arleth on Webflow
- Source terms recorded by Foxora: Free cloneable · creator terms

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: live cloneable website.
- Exact implementation authority: https://sion-car.webflow.io/
- Original listing and terms: https://webflow.com/made-in-webflow/website/sion-car
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Open the exact live URL at desktop and mobile widths before coding. Recreate its real DOM, copy geometry, media crop, scroll order, hover behavior, and first-fold transition. The marketplace thumbnail is only a comparison reference.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Sion; product navigation; technical specification navigation.
- Required layout zones: SION Website Concept navigation; Sion hero copy; Cinematic black surfaces, electric highlights, wide vehicle imagery, and precise specification typography.; first visible product reveal transition.
- Required working interactions: vehicle exploration; reservation action; product reveal; technical specifications; reservation conversion.
- Responsive behavior: Inspect the exact live template at 1440x900, 768x1024, and 390x844. Preserve its real breakpoint behavior, navigation transformation, typography wrapping, media crop, overlap, and section order.
- Asset policy: Use only media that is publicly delivered by the exact live cloneable and permitted by its source terms. Keep the Foxora poster out of the normal root.
- Captured palette: warm #fffbf5 canvas; dark #272531 type; electric vehicle media.

### Authority acceptance checks

- The normal root matches https://sion-car.webflow.io/, not merely the same design category.
- The first fold contains the captured copy: Sion.
- Navigation preserves: product navigation / technical specification navigation.
- The real first-fold controls, hover states, and responsive navigation work.
- No poster, screenshot, iframe, or generic substitute covers the reconstruction.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "sion",
  "kind": "Website",
  "source": "https://webflow.com/made-in-webflow/website/sion-car",
  "poster": "https://showcase.foxora.studio/thumbnails/sion.webp",
  "motion": null,
  "originalVisual": "https://uploads-ssl.webflow.com/63cf96b94c1db31c0bce9013/63da3d8446c58003a2ab213c_sion-webflow-showcase-webflow-showcase.jpg",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 931,
    "aspectRatio": 1.5038
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-2CD045BC

- Product domain: Mobility website.
- Required root artifact: A faithful, responsive reconstruction of the SION homepage hero and first-fold transition.
- Root view: SION homepage hero and first-fold transition.
- Native Foxora capture: 1400 × 931px, aspect ratio 1.5038.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Cinematic black surfaces, electric highlights, wide vehicle imagery, and precise specification typography.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible mobility workflow real and deterministic. Prioritize product reveal, technical specifications, reservation conversion, then add only the interactions implied by the source.
- Visible product entities: Mobility; product reveal; technical specifications; reservation conversion; primary call to action.
- Signature moments that must survive: product reveal; technical specifications; reservation conversion.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: sion; mobility; product; reveal.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: product reveal.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Cinematic black surfaces, electric highlights, wide vehicle imagery, and precise specification typography.
- Motion or interaction: Implement only the transitions and state changes implied by product reveal, technical specifications, reservation conversion; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining product reveal with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Build the real semantic website from the exact live authority https://sion-car.webflow.io/. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 931px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 931px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement product reveal as the dominant artifact.
5. Supporting reference cues: implement technical specifications; reservation conversion.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'SION homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: product reveal state; technical specifications state; reservation conversion state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic mobility website data for Mobility, product reveal, technical specifications, reservation conversion, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 931px and compare side by side with https://showcase.foxora.studio/thumbnails/sion.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably SION, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the sion homepage hero and first-fold transition in the mobility website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: product reveal; technical specifications; reservation conversion.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 36. Travel Booking

**Type:** Website · **Category:** Hospitality · **Source:** [Jonas Arleth on Webflow](https://webflow.com/made-in-webflow/website/guest-house-one-pager) · **Terms:** Free cloneable · creator terms

A faithful, responsive reconstruction of the Travel Booking homepage hero and first-fold transition. A free travel-booking one-pager for a guest house, balancing atmosphere, amenities, social proof, and availability.

# Recreate this reference faithfully: Travel Booking

You are an expert creative front-end developer. Reproduce the referenced website so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `travel-booking` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, produce a maintainable semantic implementation at '/'. A self-contained `index.html` is acceptable for the first-fold reconstruction when it preserves the exact live template behavior.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/travel-booking/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/travel-booking.webp

- Original reference visual: https://uploads-ssl.webflow.com/6364e200ec154984e7c61ba1/637f642e5447dff2efacaa00_AirBNB%2BOne%2BPager%2BLayout%2BCloneable-webflow-showcase.jpg
- Exact source page: https://webflow.com/made-in-webflow/website/guest-house-one-pager

- Source format: Webflow
- Creator credit: Jonas Arleth on Webflow
- Source terms recorded by Foxora: Free cloneable · creator terms

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: live cloneable website.
- Exact implementation authority: https://guest-house-one-pager.webflow.io/
- Original listing and terms: https://webflow.com/made-in-webflow/website/guest-house-one-pager
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Open the exact live URL at desktop and mobile widths before coding. Recreate its real DOM, copy geometry, media crop, scroll order, hover behavior, and first-fold transition. The marketplace thumbnail is only a comparison reference.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: MODERN WOODEN COTTAGE; stay details; amenities; availability; contact.
- Required layout zones: Travel Booking One-Pager - free Template navigation; MODERN WOODEN COTTAGE hero copy; Full-bleed travel photography, calm neutral panels, warm serif headlines, and compact booking controls.; first visible stay discovery transition.
- Required working interactions: availability inquiry; booking action; stay discovery; amenities and trust; availability inquiry.
- Responsive behavior: Inspect the exact live template at 1440x900, 768x1024, and 390x844. Preserve its real breakpoint behavior, navigation transformation, typography wrapping, media crop, overlap, and section order.
- Asset policy: Use only media that is publicly delivered by the exact live cloneable and permitted by its source terms. Keep the Foxora poster out of the normal root.
- Captured palette: soft #f4f4f4 canvas; forest #1f3b34 type; full-bleed cottage photography.

### Authority acceptance checks

- The normal root matches https://guest-house-one-pager.webflow.io/, not merely the same design category.
- The first fold contains the captured copy: MODERN WOODEN COTTAGE.
- Navigation preserves: stay details / amenities / availability / contact.
- The real first-fold controls, hover states, and responsive navigation work.
- No poster, screenshot, iframe, or generic substitute covers the reconstruction.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "travel-booking",
  "kind": "Website",
  "source": "https://webflow.com/made-in-webflow/website/guest-house-one-pager",
  "poster": "https://showcase.foxora.studio/thumbnails/travel-booking.webp",
  "motion": null,
  "originalVisual": "https://uploads-ssl.webflow.com/6364e200ec154984e7c61ba1/637f642e5447dff2efacaa00_AirBNB%2BOne%2BPager%2BLayout%2BCloneable-webflow-showcase.jpg",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 934,
    "aspectRatio": 1.4989
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-84A3828F

- Product domain: Hospitality website.
- Required root artifact: A faithful, responsive reconstruction of the Travel Booking homepage hero and first-fold transition.
- Root view: Travel Booking homepage hero and first-fold transition.
- Native Foxora capture: 1400 × 934px, aspect ratio 1.4989.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Full-bleed travel photography, calm neutral panels, warm serif headlines, and compact booking controls.
- Composition map: Match the cached homepage poster from the navigation through the hero and the visible edge of the next section. Preserve the original headline wrapping, media crop, focal-object scale, calls to action, negative space, and section rhythm.
- Interaction or motion identity: Make the visible hospitality workflow real and deterministic. Prioritize stay discovery, amenities and trust, availability inquiry, then add only the interactions implied by the source.
- Visible product entities: Hospitality; stay discovery; amenities and trust; availability inquiry; primary call to action.
- Signature moments that must survive: stay discovery; amenities and trust; availability inquiry.
- Forbidden drift: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- Required semantic cues: travel; booking; hospitality; stay; discovery.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: stay discovery.
- Silhouette and occupancy: Preserve the exact hero zone boundaries, headline block, focal media silhouette, first-fold crop, and surrounding negative space.
- Material, palette, and contrast: Full-bleed travel photography, calm neutral panels, warm serif headlines, and compact booking controls.
- Motion or interaction: Implement only the transitions and state changes implied by stay discovery, amenities and trust, availability inquiry; keep the initial screenshot deterministic.
- Framing and negative space: Match the source homepage from the top navigation through the visible first-fold transition.
- Implementation requirement: Build a semantic website as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining stay discovery with a generic component, stock layout, or different product concept.

This is a faithful public website reconstruction. The normal root MUST be the real semantic website—not a poster, screenshot, iframe, or comparison plate. Match the header, hero copy geometry, focal media region, above-the-fold transition, and first visible portion of the next section. Preserve readable source copy instead of inventing a new brand or campaign. Do not add a generic feature grid, testimonials, pricing, footer, dashboard, or alternate hero unless it is visible in the cached reference.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Build the real semantic website from the exact live authority https://guest-house-one-pager.webflow.io/. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 934px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 934px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement stay discovery as the dominant artifact.
5. Supporting reference cues: implement amenities and trust; availability inquiry.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Travel Booking homepage hero and first-fold transition'. The following may be implemented only after the root screenshot passes: stay discovery state; amenities and trust state; availability inquiry state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic hospitality website data for Hospitality, stay discovery, amenities and trust, availability inquiry, primary call to action; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 934px and compare side by side with https://showcase.foxora.studio/thumbnails/travel-booking.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Travel Booking, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the travel booking homepage hero and first-fold transition in the hospitality website domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: stay discovery; amenities and trust; availability inquiry.
- None of the prohibited substitutes appear: a generic bento-grid SaaS redesign; invented sections that displace the source hero; different branding, copy geometry, media, or palette.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 37. Workflow Builder

**Type:** App · **Category:** Automation · **Source:** [Vercel on Vercel Templates](https://vercel.com/templates/ai/workflow-builder) · **Terms:** Free / open source

A faithful, responsive reconstruction of the Workflow Builder primary product interface. A visual automation builder with drag-and-drop nodes, real integrations, generated code, and durable execution.

# Recreate this reference faithfully: Workflow Builder

You are an expert creative front-end developer. Reproduce the referenced app so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `workflow-builder` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/vercel-labs/workflow-builder-template as the starting codebase. Follow its README and lockfile; install and run the official application instead of producing a one-file visual imitation.
- Do not replace the source application with a self-contained `index.html`, screenshot recreation, or newly invented shell.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/workflow-builder/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/workflow-builder.webp

- Original reference visual: https://images.ctfassets.net/e5382hct74si/6wK6Ays8cCjrh4XA9nYso5/da144e48f7fe0524e1fbdd1bda097556/workflow-builder-screenshot.png
- Exact source page: https://vercel.com/templates/ai/workflow-builder

- Source format: Next.js
- Creator credit: Vercel on Vercel Templates
- Source terms recorded by Foxora: Free / open source

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source repository.
- Exact implementation authority: https://github.com/vercel-labs/workflow-builder-template
- Original listing and terms: https://vercel.com/templates/ai/workflow-builder
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact source repository as the implementation starting point. Inspect its README, lockfile, package scripts, environment example, route tree, and existing components before editing. Preserve the source stack and run the official application; do not redraw its poster in a new project.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Workflow Builder; visual workflow authoring; integration configuration; run inspection.
- Required layout zones: Workflow Builder application shell; Infinite node canvas, compact inspector panels, colored connection states, and technical diagram precision.; visual workflow authoring working state; integration configuration working state; run inspection working state.
- Required working interactions: visual workflow authoring; integration configuration; run inspection.
- Responsive behavior: Preserve the repository's real responsive navigation, pane collapse, table or canvas overflow, dialogs, keyboard behavior, loading, empty, error, and success states.
- Asset policy: Reuse assets already licensed and committed in the source repository. Do not replace the defining UI with the Foxora poster or invent stock media.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or its exact source tree.
- The official startup command reaches the real primary product route.
- The source navigation, terminology, controls, and core workflow remain recognizable and functional.
- No marketing hero, screenshot plate, or unrelated dashboard replaces the application.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "workflow-builder",
  "kind": "App",
  "source": "https://vercel.com/templates/ai/workflow-builder",
  "poster": "https://showcase.foxora.studio/thumbnails/workflow-builder.webp",
  "motion": null,
  "originalVisual": "https://images.ctfassets.net/e5382hct74si/6wK6Ays8cCjrh4XA9nYso5/da144e48f7fe0524e1fbdd1bda097556/workflow-builder-screenshot.png",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 875,
    "aspectRatio": 1.6
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-C75126A6

- Product domain: Automation application.
- Required root artifact: A faithful, responsive reconstruction of the Workflow Builder primary product interface.
- Root view: Workflow Builder primary product interface.
- Native Foxora capture: 1400 × 875px, aspect ratio 1.6.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Infinite node canvas, compact inspector panels, colored connection states, and technical diagram precision.
- Composition map: Match the cached application poster as one measured workspace. Preserve the original navigation, sidebars, toolbars, content panes, tables, cards, charts, forms, controls, data density, and active state without adding a marketing shell.
- Interaction or motion identity: Make the visible automation workflow real and deterministic. Prioritize visual workflow authoring, integration configuration, run inspection, then add only the interactions implied by the source.
- Visible product entities: Automation; visual workflow authoring; integration configuration; run inspection; active workspace state.
- Signature moments that must survive: visual workflow authoring; integration configuration; run inspection.
- Forbidden drift: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- Required semantic cues: workflow; builder; automation; visual.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: visual workflow authoring.
- Silhouette and occupancy: Preserve the exact application shell, pane proportions, navigation density, dominant working surface, and visible active state.
- Material, palette, and contrast: Infinite node canvas, compact inspector panels, colored connection states, and technical diagram precision.
- Motion or interaction: Implement only the transitions and state changes implied by visual workflow authoring, integration configuration, run inspection; keep the initial screenshot deterministic.
- Framing and negative space: Fill the viewport with the product interface exactly as shown, without an outer browser frame or promotional hero.
- Implementation requirement: Build a semantic application as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining visual workflow authoring with a generic component, stock layout, or different product concept.

This is a faithful product-interface reconstruction, not a marketing website and not a screenshot plate. The normal root MUST be the real semantic application. Rebuild the visible chrome, navigation, controls, tables, charts, forms, data density, copy, and state. Do not rename the product, prepend a landing-page hero, create an unrelated dashboard, or add decorative marketing chrome.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/vercel-labs/workflow-builder-template, preserve its source stack and existing component tree, and run its real primary product route. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 875px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 875px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement visual workflow authoring as the dominant artifact.
5. Supporting reference cues: implement integration configuration; run inspection.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Workflow Builder primary product interface'. The following may be implemented only after the root screenshot passes: visual workflow authoring state; integration configuration state; run inspection state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic automation application data for Automation, visual workflow authoring, integration configuration, run inspection, active workspace state; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 875px and compare side by side with https://showcase.foxora.studio/thumbnails/workflow-builder.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Workflow Builder, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the workflow builder primary product interface in the automation application domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: visual workflow authoring; integration configuration; run inspection.
- None of the prohibited substitutes appear: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 38. Next.js Commerce

**Type:** App · **Category:** Commerce · **Source:** [Vercel on Vercel Templates](https://vercel.com/templates/next.js/nextjs-commerce) · **Terms:** Free / open source

A faithful, responsive reconstruction of the Next.js Commerce primary product interface. A high-performance headless storefront starter with product browsing, search, cart, and Shopify integration.

# Recreate this reference faithfully: Next.js Commerce

You are an expert creative front-end developer. Reproduce the referenced app so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `next-commerce` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/vercel/commerce as the starting codebase. Follow its README and lockfile; install and run the official application instead of producing a one-file visual imitation.
- Do not replace the source application with a self-contained `index.html`, screenshot recreation, or newly invented shell.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/next-commerce/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/next-commerce.webp

- Original reference visual: https://images.ctfassets.net/e5382hct74si/1RzhtOHEvW7xyn9qAsdr5E/85331c32482b7d022585c39ddb3ae9f2/CleanShot_2023-07-24_at_21.37.15_2x.png
- Exact source page: https://vercel.com/templates/next.js/nextjs-commerce

- Source format: Next.js
- Creator credit: Vercel on Vercel Templates
- Source terms recorded by Foxora: Free / open source

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source repository.
- Exact implementation authority: https://github.com/vercel/commerce
- Original listing and terms: https://vercel.com/templates/next.js/nextjs-commerce
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact source repository as the implementation starting point. Inspect its README, lockfile, package scripts, environment example, route tree, and existing components before editing. Preserve the source stack and run the official application; do not redraw its poster in a new project.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Next.js Commerce; product discovery; cart and checkout; search and collection filtering.
- Required layout zones: Next.js Commerce application shell; Product-led minimalism, large photography, dense collection grids, and a focused cart drawer.; product discovery working state; cart and checkout working state; search and collection filtering working state.
- Required working interactions: product discovery; cart and checkout; search and collection filtering.
- Responsive behavior: Preserve the repository's real responsive navigation, pane collapse, table or canvas overflow, dialogs, keyboard behavior, loading, empty, error, and success states.
- Asset policy: Reuse assets already licensed and committed in the source repository. Do not replace the defining UI with the Foxora poster or invent stock media.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or its exact source tree.
- The official startup command reaches the real primary product route.
- The source navigation, terminology, controls, and core workflow remain recognizable and functional.
- No marketing hero, screenshot plate, or unrelated dashboard replaces the application.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "next-commerce",
  "kind": "App",
  "source": "https://vercel.com/templates/next.js/nextjs-commerce",
  "poster": "https://showcase.foxora.studio/thumbnails/next-commerce.webp",
  "motion": null,
  "originalVisual": "https://images.ctfassets.net/e5382hct74si/1RzhtOHEvW7xyn9qAsdr5E/85331c32482b7d022585c39ddb3ae9f2/CleanShot_2023-07-24_at_21.37.15_2x.png",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 1006,
    "aspectRatio": 1.3917
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-9338817C

- Product domain: Commerce application.
- Required root artifact: A faithful, responsive reconstruction of the Next.js Commerce primary product interface.
- Root view: Next.js Commerce primary product interface.
- Native Foxora capture: 1400 × 1006px, aspect ratio 1.3917.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Product-led minimalism, large photography, dense collection grids, and a focused cart drawer.
- Composition map: Match the cached application poster as one measured workspace. Preserve the original navigation, sidebars, toolbars, content panes, tables, cards, charts, forms, controls, data density, and active state without adding a marketing shell.
- Interaction or motion identity: Make the visible commerce workflow real and deterministic. Prioritize product discovery, cart and checkout, search and collection filtering, then add only the interactions implied by the source.
- Visible product entities: Commerce; product discovery; cart and checkout; search and collection filtering; active workspace state.
- Signature moments that must survive: product discovery; cart and checkout; search and collection filtering.
- Forbidden drift: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- Required semantic cues: next; commerce; product; discovery.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: product discovery.
- Silhouette and occupancy: Preserve the exact application shell, pane proportions, navigation density, dominant working surface, and visible active state.
- Material, palette, and contrast: Product-led minimalism, large photography, dense collection grids, and a focused cart drawer.
- Motion or interaction: Implement only the transitions and state changes implied by product discovery, cart and checkout, search and collection filtering; keep the initial screenshot deterministic.
- Framing and negative space: Fill the viewport with the product interface exactly as shown, without an outer browser frame or promotional hero.
- Implementation requirement: Build a semantic application as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining product discovery with a generic component, stock layout, or different product concept.

This is a faithful product-interface reconstruction, not a marketing website and not a screenshot plate. The normal root MUST be the real semantic application. Rebuild the visible chrome, navigation, controls, tables, charts, forms, data density, copy, and state. Do not rename the product, prepend a landing-page hero, create an unrelated dashboard, or add decorative marketing chrome.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/vercel/commerce, preserve its source stack and existing component tree, and run its real primary product route. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 1006px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 1006px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement product discovery as the dominant artifact.
5. Supporting reference cues: implement cart and checkout; search and collection filtering.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Next.js Commerce primary product interface'. The following may be implemented only after the root screenshot passes: product discovery state; cart and checkout state; search and collection filtering state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic commerce application data for Commerce, product discovery, cart and checkout, search and collection filtering, active workspace state; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 1006px and compare side by side with https://showcase.foxora.studio/thumbnails/next-commerce.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Next.js Commerce, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the next.js commerce primary product interface in the commerce application domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: product discovery; cart and checkout; search and collection filtering.
- None of the prohibited substitutes appear: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---

## 39. Morphic

**Type:** App · **Category:** Answer Engine · **Source:** [Morphic on Vercel Templates](https://vercel.com/templates/next.js/morphic-ai-answer-engine-generative-ui) · **Terms:** Free / open source

A faithful, responsive reconstruction of the Morphic primary product interface. An AI answer engine with generative UI, web results, citations, follow-up exploration, and shareable research sessions.

# Recreate this reference faithfully: Morphic

You are an expert creative front-end developer. Reproduce the referenced app so the rendered result is recognizably the same first-view composition shown in Foxora. This is an exact reconstruction task, not an inspiration exercise and not a request for a redesign.

Prompt registry version: 7.4.0.

## Delivery contract

- Before editing, classify the open workspace. Use its root only when it is empty, was created specifically for this template, or is the exact source repository named above.
- If the open workspace contains an unrelated application or user work, do not modify, delete, rename, move, or replace any existing file or route. Create an isolated child project named `morphic` and treat that directory as the implementation root. If the environment cannot isolate a child project safely, stop and ask the user to open a new empty project.
- If no project exists, use https://github.com/miurla/morphic as the starting codebase. Follow its README and lockfile; install and run the official application instead of producing a one-file visual imitation.
- Do not replace the source application with a self-contained `index.html`, screenshot recreation, or newly invented shell.
- The finished page must load at the normal root route '/' with no required hash. Do not route the user to '#cta', '#hero', a component gallery, a design-spec page, or a different demo.
- Do not stop at a plan, wireframe, component specification, or prose explanation. Write and run the implementation.
- Keep dependencies minimal. Load an external library only when it is essential to reproduce an observed effect, and pin its version.
- Preserve a source-credit comment in the code without adding a visible credit block that changes the reference composition.

## Reference pack — open these before coding

- Foxora showcase detail: https://showcase.foxora.studio/prompts/morphic/
- Foxora cached poster (stable HTTPS): https://showcase.foxora.studio/thumbnails/morphic.webp

- Original reference visual: https://images.ctfassets.net/e5382hct74si/4bu9bW4KbJbngc4H0rPV4Q/3c062ebb49d1e1bbc3115f6071f5d901/CleanShot_2024-04-08_at_20.22.17_2x.png
- Exact source page: https://vercel.com/templates/next.js/morphic-ai-answer-engine-generative-ui

- Source format: Next.js
- Creator credit: Morphic on Vercel Templates
- Source terms recorded by Foxora: Free / open source

Open the Foxora cached asset and the exact source page before writing components. The cached asset is the visual baseline; the source page is the interaction and context baseline. If the environment cannot access either baseline, stop and report the inaccessible URL instead of inventing a substitute.

## Implementation authority — inspect before coding

- Authority type: open-source repository.
- Exact implementation authority: https://github.com/miurla/morphic
- Original listing and terms: https://vercel.com/templates/next.js/morphic-ai-answer-engine-generative-ui
- Authority captured by Foxora: 2026-07-27.
- Bootstrap rule: Use the exact source repository as the implementation starting point. Inspect its README, lockfile, package scripts, environment example, route tree, and existing components before editing. Preserve the source stack and run the official application; do not redraw its poster in a new project.

Do not start from the Foxora thumbnail. Open the exact implementation authority first. If it is unavailable, stop and report that URL; do not fabricate an equivalent design.

## Source-specific understanding

- Required visible copy and terminology: Morphic; web-grounded answers; generative result blocks; research follow-ups.
- Required layout zones: Morphic application shell; Search-first composition, spacious answer typography, source cards, and subtle streaming progress.; web-grounded answers working state; generative result blocks working state; research follow-ups working state.
- Required working interactions: web-grounded answers; generative result blocks; research follow-ups.
- Responsive behavior: Preserve the repository's real responsive navigation, pane collapse, table or canvas overflow, dialogs, keyboard behavior, loading, empty, error, and success states.
- Asset policy: Reuse assets already licensed and committed in the source repository. Do not replace the defining UI with the Foxora poster or invent stock media.


### Authority acceptance checks

- The project is bootstrapped from the exact repository or its exact source tree.
- The official startup command reaches the real primary product route.
- The source navigation, terminology, controls, and core workflow remain recognizable and functional.
- No marketing hero, screenshot plate, or unrelated dashboard replaces the application.

## Exact asset manifest — copy unchanged

```json
{
  "registryVersion": "7.4.0",
  "slug": "morphic",
  "kind": "App",
  "source": "https://vercel.com/templates/next.js/morphic-ai-answer-engine-generative-ui",
  "poster": "https://showcase.foxora.studio/thumbnails/morphic.webp",
  "motion": null,
  "originalVisual": "https://images.ctfassets.net/e5382hct74si/4bu9bW4KbJbngc4H0rPV4Q/3c062ebb49d1e1bbc3115f6071f5d901/CleanShot_2024-04-08_at_20.22.17_2x.png",
  "referenceOnly": true,
  "normalRootMayRenderReferenceMedia": false,
  "frame": {
    "width": 1400,
    "height": 854,
    "aspectRatio": 1.6393
  }
}
```

These values are immutable for this task. Do not shorten, redirect, proxy, rename, regenerate, or substitute any manifest URL.

## Source-of-truth order

When instructions conflict, use this order:

1. The public source implementation recipe, when included below.
2. The exact source page and its visible behavior.
3. The Foxora cached poster or animation for visual comparison only.
4. The authored anatomy below.
5. General implementation conventions.

The reference is a specification, not a mood board. Do not replace its central artifact with an easier illustration, generic 3D primitive, stock dashboard, gradient blob, bento grid, or unrelated product.

## Exact visual target — FX-D1321EA5

- Product domain: Answer Engine application.
- Required root artifact: A faithful, responsive reconstruction of the Morphic primary product interface.
- Root view: Morphic primary product interface.
- Native Foxora capture: 1400 × 854px, aspect ratio 1.6393.
- Desktop comparison viewport: 1440 × 900px.
- Visual DNA: Search-first composition, spacious answer typography, source cards, and subtle streaming progress.
- Composition map: Match the cached application poster as one measured workspace. Preserve the original navigation, sidebars, toolbars, content panes, tables, cards, charts, forms, controls, data density, and active state without adding a marketing shell.
- Interaction or motion identity: Make the visible answer engine workflow real and deterministic. Prioritize web-grounded answers, generative result blocks, research follow-ups, then add only the interactions implied by the source.
- Visible product entities: Answer Engine; web-grounded answers; generative result blocks; research follow-ups; active workspace state.
- Signature moments that must survive: web-grounded answers; generative result blocks; research follow-ups.
- Forbidden drift: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- Required semantic cues: morphic; answer; engine; web; grounded.

Do not change the product category or the artifact type. During the visual-parity pass, preserve visible reference copy, labels, number formatting, control names, and line breaks where they can be read. If a word is genuinely unreadable, use replacement text with the same approximate character count and wrapping; do not invent a new campaign or long-form product story.

## Non-negotiable visual anchor

- Primary subject: web-grounded answers.
- Silhouette and occupancy: Preserve the exact application shell, pane proportions, navigation density, dominant working surface, and visible active state.
- Material, palette, and contrast: Search-first composition, spacious answer typography, source cards, and subtle streaming progress.
- Motion or interaction: Implement only the transitions and state changes implied by web-grounded answers, generative result blocks, research follow-ups; keep the initial screenshot deterministic.
- Framing and negative space: Fill the viewport with the product interface exactly as shown, without an outer browser frame or promotional hero.
- Implementation requirement: Build a semantic application as the normal root experience. Use the cached poster only in an explicit QA comparison mode, never as the shipped interface.
- Forbidden substitution: Do not substitute the defining web-grounded answers with a generic component, stock layout, or different product concept.

This is a faithful product-interface reconstruction, not a marketing website and not a screenshot plate. The normal root MUST be the real semantic application. Rebuild the visible chrome, navigation, controls, tables, charts, forms, data density, copy, and state. Do not rename the product, prepend a landing-page hero, create an unrelated dashboard, or add decorative marketing chrome.

## Mandatory implementation recipe

### Required reconstruction and comparison implementation

1. Build or run the real semantic UI at the normal root route. Bootstrap from https://github.com/miurla/morphic, preserve its source stack and existing component tree, and run its real primary product route. The normal root must never be covered by the cached poster and must not require `?live=1`.
2. Keep the exact poster URL only in a source-credit/QA comment or optional development-only comparison tool. Never use it as the normal root, loading state, fallback, background, iframe, or interaction surface.
3. If you add `?reference=1`, make it an explicitly labeled QA overlay with `pointer-events: none` that is absent by default. It must not change the DOM underneath or be necessary for the application to look complete.
4. Compare the real root at 0%, 50%, and 100% QA overlay opacity. Correct zone bounds, copy wrapping, focal-object scale, media crop, palette, radii, and density until the live UI aligns with the poster.
5. Preserve readable labels, values, and product terminology from the exact reference. Use the authored entities only to fill genuinely unreadable details; do not replace the product with a different concept.
6. Implement every visible control and the primary workflow. A screenshot with invisible hotspots, dead controls, or decorative tables does not pass.
7. Test the real root at 1400 × 854px and 1440 × 900px, then verify tablet and mobile behavior.
8. Before reporting completion, assert that no cached Foxora poster URL appears in a rendered `img`, CSS `background-image`, canvas texture, iframe, or full-page overlay at the normal root.

The implementation is incomplete if the default page is a reference plate, screenshot, iframe, static mock, or unrelated redesign.

## Frame and geometry lock

Treat the 1400 × 854px cached capture as a measured artboard.

- Reproduce the same major horizontal and vertical zones, their order, their relative widths and heights, and their alignment.
- Match the focal subject's center, scale, crop, overlap, and amount of surrounding negative space.
- Match text block width, line count, alignment, approximate cap height, and distance to adjacent controls.
- Match navigation height, side insets, card radii, border weight, shadow softness, media crop, and surface density.
- Preserve what is above the fold. Do not push the defining visual below the viewport.
- Do not add a large wrapper card, browser frame, floating navigation pill, side rail, or hero panel unless the reference contains it.
- Use CSS custom properties for sampled canvas, surface, text, border, accent, shadow, radius, and spacing values. Sample from the reference rather than choosing a new palette.
- Match the reference at its native capture size first, then at 1440 × 900px. A responsive version is not allowed to change the desktop art direction.

## Required page anatomy

Build the root view first and in this order:

1. Canvas and page shell: reproduce the base color, texture, clipping, overflow, and minimum-height behavior.
2. Global or application navigation: recreate only the controls and density visible in the reference.
3. Primary copy or information region: keep its exact side, width, hierarchy, alignment, and line wrapping.
4. Primary visual or working surface: implement web-grounded answers as the dominant artifact.
5. Supporting reference cues: implement generative result blocks; research follow-ups.
6. First fold transition: include only the content already visible at the lower edge of the reference.

The primary view is 'Morphic primary product interface'. The following may be implemented only after the root screenshot passes: web-grounded answers state; generative result blocks state; research follow-ups state. They must not replace, precede, or visually dilute the root artifact.

## Interaction and state fidelity

- Every control visible in the reference must have an appropriate hover, focus, active, and disabled treatment.
- Buttons, tabs, filters, form fields, menus, close controls, and primary actions must work instead of being decorative.
- Use realistic answer engine application data for Answer Engine, web-grounded answers, generative result blocks, research follow-ups, active workspace state; preserve the visible density and formatting of the source.
- Keep all initial values deterministic so the first screenshot is stable on every reload.
- Animation must begin in the same visual state as the reference and settle into the same hierarchy. Do not add perpetual motion to elements that are still in the source.
- Prefer transform and opacity for UI transitions. Pause expensive work when offscreen or when the document is hidden.
- Respect 'prefers-reduced-motion' with a composed static state that still matches the settled reference.
- Never autoplay sound.

## Asset rules

- Preserve the exact HTTPS reference URLs in a source-credit/QA comment. Do not convert them to localhost paths, guessed filenames, expired blob URLs, or runtime media unless the public source recipe explicitly identifies that media as part of the implementation.
- Do not hotlink logos, portraits, product photography, or proprietary media from the source page unless the recorded source terms permit it. For visual QA, the Foxora cached reference remains available as a comparison target.
- Foxora posters and animated WebPs are visual QA references only. They must not be rendered at the normal root for Motion, Website, or App entries.
- Build the real DOM, CSS, SVG, canvas, WebGL, or source-media implementation as the default experience. Never pretend a poster, screenshot, or screen recording is interactive UI.
- Provide an intentional fallback for asset failure that keeps the layout dimensions stable.
- Keep the reconstructed primary subject sharp at desktop and mobile densities; preserve the measured crop and aspect ratio without stretching.

## Responsive behavior

- Desktop geometry is reference-measured. Tablet and mobile are careful recompositions of the same hierarchy, not new designs.
- At narrower widths, preserve the focal subject before secondary decoration; reduce or move peripheral labels only when necessary.
- Keep text readable without changing its character, maintain at least 44px interactive targets, and avoid horizontal overflow.
- Preserve deliberate overlap and crop relationships. Do not stack every element into generic full-width cards.
- Test at 1440 × 900, 1024 × 768, 768 × 1024, and 390 × 844.

## Accessibility

- Use semantic landmarks and heading order, labeled controls, meaningful alt text, visible keyboard focus, and logical tab order.
- Keep essential text and controls at WCAG AA contrast.
- Do not make motion the only carrier of meaning.
- Avoid adding visually hidden interaction that conflicts with what sighted users see.

## Implementation order — do not skip

1. Open and inspect every available URL in the reference pack.
2. Observe the reference at native size. Record, internally, the major zone bounds, focal point, text line count, palette, type character, border radius, and shadow behavior.
3. For motion, inspect opening, midpoint, and settled states. For an app, identify every pane and control. For a website, identify the hero and first fold transition.
4. Implement the mandatory recipe above before creating any secondary component. Build the real page shell, defining motion or working surface, visible copy, and controls now.
5. Render at 1400 × 854px and compare side by side with https://showcase.foxora.studio/thumbnails/morphic.webp.
6. Correct geometry, typography, color, crop, and density before adding secondary behavior.
7. Render at 1440 × 900px and repeat the comparison.
8. Add working interactions and responsive layouts without changing the approved desktop composition.
9. Run a final browser check for console errors, missing assets, broken controls, overflow, reduced motion, and keyboard access.

## Visual acceptance gate

The implementation passes only when all of these are true:

- At first glance, the root screenshot is recognizably Morphic, not merely the same genre.
- The root artifact is still a faithful, responsive reconstruction of the morphic primary product interface in the answer engine application domain.
- Major zone bounds, focal-subject position, and viewport occupancy are within roughly 4% of the reference.
- Heading and primary copy line counts match; typography does not wrap into a different composition.
- The dominant palette, contrast distribution, surface density, radii, and shadow character match the cached capture.
- All three signature moments are present: web-grounded answers; generative result blocks; research follow-ups.
- None of the prohibited substitutes appear: a marketing landing page in front of the app; generic dashboard cards that replace the source workflow; different navigation, data density, terminology, or product state.
- The exact source links and credit remain in a code comment or project documentation.
- All referenced assets return successfully over HTTPS; no visible broken image, CORS failure, or localhost-only URL remains.
- The root experience works at '/', without '#cta' or another hash being required.
- The normal root is the semantic reconstruction itself; it does not contain a full-page Foxora poster, screenshot, iframe, or reference lock.
- Every visible control and the primary workflow work at the default route.
- If a `?reference=1` QA mode exists, it is absent by default, pointer-transparent, and never required to make the normal root look complete.

## Fail-closed rule

If the primary visual anchor, root artifact, or major composition differs materially from the reference, the project is incomplete even when the code compiles. A page that merely renders Foxora's reference media is also incomplete even when its pixels match. Continue correcting the real root view and its interactions or report the exact blocker. Do not claim success, add unrelated sections, or substitute a simpler design.

Return the working implementation and a concise verification note listing the tested route, viewports, reference URLs, and any intentional deviation.

---