Fantasy

Give my page the scroll feel of Fantasy (fantasy.co) for a new site with its own content.

Scrolling feels weighted and smooth, decoupled from the native browser scroll to create a continuous, gliding sensation. As the user moves down, sections pin to the screen; background videos remain fixed while text statements scrub into view, and grids of images zoom or shift perspective relative to the scroll position.

Measured and noted:
- Scroll (Scroll smoothing): Native scroll · no smoothing, 1:1 with the touch (measured from 30 fps frames, ±0.084 % fit error)
- Scroll: Lenis smooth scroll, settles in about 1.6 s, pinned, scrubbed (estimate)

Techniques: smooth (lerped) scroll and sticky or pinned sections.

Libraries: ScrollTrigger, Lenis, GSAP and ScrollSmoother.

Curator's notes:
- Lenis (a 400 px wheel settles in about 1.6 s). Sticky full-screen chapters: the hero video pins as a client badge cycles; statements go word by word from dim and blurred to white (probably scrubbed SplitText); a dark product grid zooms around a centred line; services and cases pin over media. A white footer rises last.

Constraints:
- Recreate the feel, not the site: write your own copy and use your own images, icons and logo; do not copy its code, fonts or assets.
- Where a font is not licensed for you, pick a close substitute with the same build (width, contrast, x-height) and keep the sizes, weights and tracking below.
- Animate transform and opacity (clip-path or filter only where the reference clearly does); list exact properties, never "transition: all".
- Honour prefers-reduced-motion: keep opacity and colour fades, drop movement and smooth scrolling.
- Values marked (estimate) were drafted from notes, not measured: tune them by eye against the reference.

Build an intro sequence in the manner of Fantasy (fantasy.co) for a new site with its own content.

The page enters with a white flash that resolves into black, followed by the central logo fading in before a glowing silhouette swells behind it. This intro sequence dissolves to reveal the hero video underneath, transitioning smoothly from the brand mark to the moving image.

Measured and noted:
- Intro (Intro reveal): ease-out · 240 ms · 33 ms stagger (measured from 30 fps frames, ±0.94 % fit error)
- Intro (Load): cubic-bezier(0.19, 1, 0.22, 1) · about 3.9 s (estimate)

Curator's notes:
- white flash, then black; the spaced "FANTASY" wordmark fades in centred (about 3.9 s), a pink-glowing logo-mark silhouette swells behind it and dims the letters (about 5–6.4 s), then the hero car video fades up under the header (about 8 s). The logo mark eases with cubic-bezier(0.19, 1, 0.22, 1) over 1 s.

Constraints:
- Recreate the feel, not the site: write your own copy and use your own images, icons and logo; do not copy its code, fonts or assets.
- Where a font is not licensed for you, pick a close substitute with the same build (width, contrast, x-height) and keep the sizes, weights and tracking below.
- Animate transform and opacity (clip-path or filter only where the reference clearly does); list exact properties, never "transition: all".
- Honour prefers-reduced-motion: keep opacity and colour fades, drop movement and smooth scrolling.
- Values marked (estimate) were drafted from notes, not measured: tune them by eye against the reference.

Style hover and focus states in the manner of Fantasy (fantasy.co) for a new site with its own content.

Interactive elements respond with subtle ease-out transitions; collapsed header buttons expand in width to reveal labels, and navigation links fade in with a slight delay. The cursor remains native, but clickable paths and buttons shift opacity or position gently to indicate interactivity without disrupting the visual flow.

Measured and noted:
- Hover (Hover and cursor): ease-out · 650 ms (estimate)
- Hover and focus (CSS): 350 ms ease-out on all
- Hover and focus (CSS): 300 ms ease-out on all, background-color, fill

Curator's notes:
- native cursor. The collapsed header button widens into "Menu" (width 0.65 s); logo and nav paths fade and shift (350 ms ease-out, 175 ms delay). Menu opens a full-screen black overlay with three large centred links, small secondary links and a featured-case card.

Gate hover effects behind @media (hover: hover) and (pointer: fine), and give every hover a matching :focus-visible state.

Constraints:
- Recreate the feel, not the site: write your own copy and use your own images, icons and logo; do not copy its code, fonts or assets.
- Where a font is not licensed for you, pick a close substitute with the same build (width, contrast, x-height) and keep the sizes, weights and tracking below.
- Animate transform and opacity (clip-path or filter only where the reference clearly does); list exact properties, never "transition: all".
- Honour prefers-reduced-motion: keep opacity and colour fades, drop movement and smooth scrolling.
- Values marked (estimate) were drafted from notes, not measured: tune them by eye against the reference.

Set up type and colour tokens in the manner of Fantasy (fantasy.co) for a new site with its own content.

Type (sizes at a 1440 px wide viewport; scale them fluidly with clamp() for smaller screens):
Typography utilises a clean sans-serif family across all weights, keeping body copy small and unobtrusive to maintain focus on the visuals. Display text is set with tight tracking and specific leading, often animating word-by-word from a blurred or dim state into sharp white clarity.
- sans: weights 400, 500 (100 % of the text)
- Display: 42 px · sans 400 · leading 1.1 · tracking -0.02 em
- Body: 17 px · sans 400 · leading 1.4 · tracking -0.01 em
- Small: 15 px · sans 500 · leading 1 · tracking -0.011 em
- Small: 13 px · sans 400 · leading 1.4 · tracking -0.013 em

Colour:
The palette is anchored by a near-black ground and white ink, establishing a stark, gallery-like contrast for the content. Occasional use of frosted glass effects adds subtle texture, while the primary colour comes from the saturated hues within the video assets themselves.
- Ground: #000000 (near-black)
- Ink: #ffffff (white)
- Line: #000000 at 10 % (near-black)

Define these as CSS custom properties (for example --font-display, --font-body, --color-ground, --color-ink, --color-accent) and use the roles as named.

Constraints:
- Recreate the feel, not the site: write your own copy and use your own images, icons and logo; do not copy its code, fonts or assets.
- Where a font is not licensed for you, pick a close substitute with the same build (width, contrast, x-height) and keep the sizes, weights and tracking below.