Freehtmlcssjs

Scroll-morphing particle studio site

Deep-sea agency one-pager where 9,000 glowing particles morph from a jellyfish into a swell, a pearl, a knot, a school of fish and a nautilus as you scroll.

Prompt

## Goal

Design a one-page website for Driftlight, a digital design studio. Keep the tone calm, confident and a little poetic.

Use the style, layout, particle and motion rules below exactly. Replace the sample content with content that fits the goal, keeping the same sections, the same number of items in each, and similar text lengths.

## Style

Keep this exactly: it is what makes the design look the way it does. The theme is the deep sea at night: glowing bioluminescent particles drifting in dark water.
- Page background: a vertical gradient over the whole document height, #0B2A35 at the top, #05161D at 28%, #030E13 at 62%, #01070A at the bottom, so the page gets darker as you scroll down.
- Colors: text #E8F6F5, muted text #8FB3B5, primary accent aqua #5CF2D6, secondary accent coral #FF8A65, hairlines and borders rgb(232 246 245 / 0.14), glass panels rgb(3 16 22 / 0.45).
- Fonts, from Google Fonts: **Syne** (600, 700, 800) for display headings and the logo, **Instrument Serif** italic for accent words, **Manrope** (300 to 600) for everything else.
- Display headings: Syne 800, uppercase, letter-spacing -0.03em, line-height 0.9. Hero heading clamp(52px, 7.4vw, 108px); section headings clamp(48px, 6.6vw, 96px) (clamp(38px, 10.5vw, 72px) under 900px wide). Every heading except the Studio heading has one accent word set in Instrument Serif italic, normal weight, not uppercase, 1.14em, line-height 0.8, colored aqua. The accent word always sits on its own line.
- Body: Manrope 16px, line-height 1.6. Lead paragraphs 18px, line-height 1.65, muted, max-width 460px, with key phrases in bold (600) in the main text color, and a soft dark text-shadow 0 2px 24px rgb(1 10 14 / 0.9) so they stay readable over particles.
- Kicker above each section heading: Manrope 13px semibold, uppercase, letter-spacing 0.22em, aqua, preceded by a 36px × 1px aqua line, written as "01 Studio", "02 Solutions" and so on.
- Buttons are pills (999px radius), padding 16px 28px, 15px semibold. Primary: aqua background, text #02171B, shadow 0 10px 36px rgb(92 242 214 / 0.25). Secondary: transparent with a 1px hairline border.
- Glass cards: 20px radius, 28px padding, glass background, 1px hairline border, backdrop blur 8px.
- Content max-width 1312px including 64px side padding (20px under 900px), centered: at 1440px wide, text starts 128px from the left edge. Every section is at least 100vh tall with 140px vertical padding, content vertically centered.
- Every focusable element shows a 2px aqua focus outline with 4px offset.

## Layout

Fixed layers, behind all content and never blocking clicks:
- **Light rays** from the surface: a 75vh tall band at the top of the viewport, made of a repeating 104deg linear gradient of soft aqua stripes (rgb(92 242 214 / 0.055)), blurred 8px, masked by an ellipse fading out downward. Its opacity drops to 0 over the first third of the page scroll, as if you are diving away from the light.
- **Particle canvas**: one full-screen fixed `<canvas>` (described under Particle field).

Fixed UI:
- **Nav** (top, full width, padding 28px 64px): left, the logo: a 28px aqua line icon of a jellyfish (a half-circle bell with three short wavy tentacles) and the brand name in Syne 700, 18px, uppercase, letter-spacing 0.08em. Right, with 28px gaps: a muted text link "Careers", an aqua outline pill "Let's talk" (fills aqua on hover), and a 46px round menu button with two short lines. After 40px of scroll, the nav shrinks to 18px vertical padding and gets a rgb(3 14 19 / 0.55) background with a 14px backdrop blur. The menu button opens a full-screen overlay (dark, blurred) listing the five sections in Syne 800 uppercase, about 80px, each with a small coral number in front. The two lines turn into an X, and Esc or clicking a link closes it.
- **Depth gauge** (fixed on the right edge, vertically centered, 36px from the edge, hidden under 900px): the word "DEPTH" (11px, uppercase, letter-spacing 0.2em, muted), a 2px × 180px track that fills from the top with an aqua-to-coral gradient as the page scrolls, and a value below it with tabular numbers, counting from "0 m" at the top of the page to "4,200 m" at the bottom, rounded to 10 m.

Sections, top to bottom. Each one has a `data-shape` naming the particle shape shown while it is on screen:
1. **Hero** (jellyfish): left-aligned. An eyebrow (13px uppercase, letter-spacing 0.18em, muted, with an 8px aqua dot that slowly pulses its glow), then the heading on three lines, "Make" / "your brand" / accent "glow.", then a lead paragraph, then a primary and a secondary button. A "Scroll to dive" cue is centered at the bottom: 12px uppercase text above a 48px aqua line that keeps dripping down (scaleY 0 to 1, then fading).
2. **Studio** (sea swell): one text block on the right side of the page, ending 6% before the content's right edge: kicker, the one-word heading "Studio" (no accent word), lead paragraph (max-width 560px). The heading may be wider than the paragraph and must never be clipped.
3. **Solutions** (pearl with halo): one text block on the left: kicker, heading "What we" / accent "shape.", lead paragraph, then a row of three stats separated from the paragraph by a hairline (32px above): numbers in Syne 700, 44px, with an optional coral suffix ("+", "y"), and 13px muted labels below; then an aqua text link with an arrow that slides right on hover.
4. **Expertise** (current knot): centered kicker (lines on both sides) and heading "Area of" / accent "expertise", then 88px below, a 4-column grid of glass cards, 20px gaps. Each card has a heading (Syne 700, 15px, uppercase, letter-spacing 0.16em) with a small coral number before it ("01" to "04"), and a list of four items (16px, muted, turning bright and moving 4px right on hover). Cards lift 6px and get an aqua border on hover. 2 columns under 1100px, 1 under 560px.
5. **Crew** (school of fish): a header row with the kicker and heading "Our" + accent "crew" on the left and a short lead paragraph (max-width 340px) aligned to the bottom right. 80px below, a 4-column grid of eight people, 56px row gap; every even item is pushed down 72px so the names stagger. Each person: their first name in Syne 700 uppercase (clamp(34px, 3.9vw, 56px)), except every third item starting with the second, which uses Instrument Serif italic at clamp(40px, 4.5vw, 64px). Under the name, the role (12px uppercase, letter-spacing 0.14em, muted) and a 24px rounded-square "in" link. Names turn aqua on hover. 3 columns under 1100px and 2 under 900px, with no stagger.
6. **Contact** (nautilus): the kicker "05 Say hello", then the email address as one giant link in Instrument Serif italic (clamp(44px, 8.2vw, 124px)) followed by a 76px aqua circle with a dark diagonal arrow. On hover, a 2px aqua underline grows under the email from left to right and the arrow circle rotates 45deg. This section's bottom padding is 48px instead of 140px. Below the email, pinned to the bottom of the section: a footer with a hairline on top, in 4 columns (2fr 1fr 1fr 1fr): logo with a one-sentence description, "Studio" (address on three lines), "Social" (three links), "Contact" (phone and jobs email). Column titles 12px uppercase, letter-spacing 0.2em. Then a bottom row with the copyright on the left and "Back to the surface ↑" on the right.

## Particle field

This is the centerpiece. One fixed full-screen canvas draws about **9,000 glowing particles** (4,200 under 900px wide) that form one 3D shape per section and morph into the next shape as you scroll. Draw it with the 2D canvas API and your own simple 3D math; no WebGL or libraries.
- **Particles**: each one gets four stable random numbers a, b, c, d in 0..1 (from a seeded random generator, so the shapes look the same on every load), a random 3D unit direction for scattering, a random size, and a color: 60% aqua, 32% coral, 8% pale white #E8F6F5. Draw each particle as a pre-rendered 64px radial-gradient sprite: white core, the particle color at 95% at 16% of the radius, 22% at 42%, transparent at the edge. Draw sprites 3 to 7.5 device pixels wide, larger when closer, with the composite mode "lighter" so dense areas glow. Opacity follows depth: clamp(0.42 + 0.22 × z, 0.12, 1). Use devicePixelRatio, capped at 2.
- **Camera**: perspective with the camera 5 units away. Project with screen = center + point × focal / (5 − z), where focal = min(viewport height × 1.3, viewport width × 2.2) × the shape's scale (on mobile, viewport width × 1.7, times 0.82). Each shape has a screen offset (ox, oy as fractions of the viewport), a tilt around the X axis, and a spin speed around the Y axis. On mobile, every shape is centered horizontally.
- **Shapes**, in roughly −1.5..1.5 units, y up:
1. **Jellyfish** (ox +0.23, tilt 0.28 rad, spin 0.12 rad/s): 60% of points form the bell, a dome of radius 0.95 whose rim flares outward and droops slightly; 10% form four frilly oral arms hanging from the center to 1.15 units down; 30% form 12 tentacles, each hanging about 2.1 units from the rim, narrowing to 65% of the rim radius and swaying with sine waves that travel down them. The bell pulses gently (scale 1 ± 0.07, 1.8 rad/s).
2. **Sea swell** (ox −0.16, scale 1.25, tilt 0.6, spin 0.03): a 4.4 × 2.6 sheet of points whose height is the sum of three moving sine waves (amplitudes 0.28, 0.2, 0.12), like the surface of the sea seen from slightly above.
3. **Pearl with halo** (ox +0.22, scale 0.95, tilt 0.35, spin 0.18): half the points on a sphere of radius 0.72, half in a flat ring from radius 1.05 to 1.6 (denser toward the inside), tilted about 22deg and slowly orbiting.
4. **Current knot** (centered, scale 0.95, tilt 0.2, spin 0.15): a (2,3) torus knot of size 1.26 with a tube about 0.13 thick; the points slowly flow along the curve.
5. **School of fish** (ox +0.27, scale 0.85, tilt 0.32): 56 small fish, each about 0.34 long and 0.1 tall with a flared tail fin, circling a vertical axis on four rings (radius 0.55 to 1.39) at different heights and speeds, their tails wiggling.
6. **Nautilus shell** (ox +0.06, scale 0.7, tilt 0.18, no spin, swaying ±0.35 rad): a tube wound along a logarithmic spiral, just over two turns, the tube radius half the spiral radius, with faint growth ridges. The spiral lies flat in the screen plane, facing the viewer, so you see its full coil, not its edge.
- **Scroll morph**: the scroll position maps to a continuous index across the sections (section k is fully formed when its center is in the middle of the viewport). Between two sections, wait for the first 15% of the way, morph over the middle 70% with a smoothstep ease, then hold. During a morph, each point moves from its place in shape A to its place in shape B, and is pushed out along its scatter direction by sin(π × progress) × burst, so the shape bursts into a cloud and re-forms. Burst is 2.6 units when leaving the jellyfish (a big explosion across the screen) and 1 unit for the others. The screen offset, scale, tilt and spin also blend between the two shapes. The index follows the real scroll position with easing (7.5% of the remaining distance per frame), so the morph trails smoothly.
- **Cursor**: the whole field rotates toward the mouse, up to ±0.17 rad left and right and ±0.1 rad up and down, eased at 5% per frame. Ignore touch.
- **Marine snow**: before the particles, draw 150 tiny dim specks (70 on mobile), radius 0.4 to 1.7px, rgb(200 240 235) at 12% to 42% opacity, drifting slowly upward, swaying sideways, and moving up faster while you scroll down, wrapping around the screen.

## Motion

Easing for everything: cubic-bezier(0.22, 1, 0.36, 1).
- **Headings**: each heading line is masked (overflow hidden) and its text slides up from 105% below over 1100ms when the heading is 20% visible, lines 110ms apart.
- **Everything else** marked to reveal (eyebrow, kickers, paragraphs, buttons, stats, cards, crew members, email) fades in and rises 32px over 900ms, staggered 90ms apart within a section. Each element animates once (IntersectionObserver, threshold 0.2). Mark the revealed state with its own class that nothing else uses, such as `is-revealed` (not `in`, which the crew's LinkedIn badge could also use).
- **Stats** count up from 0 to their value over 1400ms with a cubic ease-out when they appear, keeping their coral suffix.
- **Hover**: the primary button lifts 2px and its glow grows into a 6px aqua ring; secondary buttons get an aqua border and a faint aqua fill.
- **Reduced motion**: with prefers-reduced-motion: reduce, show all content immediately with no reveals, counting or looping animation. The particles still form the shape of the section on screen, but without time-based animation, bursting or easing.

## Sample content

- Logo: "Driftlight". Eyebrow: "Digital studio · Since 2016".
- Hero: "Make your brand glow." Lead: "We craft digital experiences where **design** meets **technology**, so your brand becomes the light people swim toward." Buttons: "Start a project", "Explore the studio".
- Studio: "We believe **curiosity and craft** are what connect a brand with the people it is for. Strategy, design and code, made in one room by one team."
- Solutions: "We shape **immersive digital products** around real people: websites, 3D stories and brand systems that are as clear as they are memorable." Stats: "140+ launches shipped", "27 design awards", "9y average partnership". Link: "See what we do".
- Expertise: Strategy (Brand positioning, Digital strategy, Research & insight, Naming); Creative (Art direction, UI / UX design, Motion design, Illustration); Technology (Web development, WebGL & 3D, E-commerce, Headless CMS); Production (3D modelling, Video production, Sound design, Photography).
- Crew lead: "**Curious people, working better together.** Committed to honest, careful work and to each other." People: Marina (Creative Director), Theo (Lead Developer), Aiko (3D Artist), Rafael (Motion Designer), Nadia (Brand Strategist), Kenji (WebGL Developer), Lucía (UI Designer), Oskar (Producer).
- Contact: an email made from the brand name in lowercase, such as "hello@yourbrand.studio". Footer description: "An independent digital studio for brands that want to be found in the deep end of the internet." Address "Pier 4, Harbour Lane / 1200-109 Lisbon / Portugal". Social: Instagram, LinkedIn, Vimeo. Phone "+351 21 000 0420". Copyright "© 2026 Driftlight".

## Images

This design uses no photos: every visual is the particle canvas, CSS and inline SVG. Do not add images. Draw the logo and arrows as simple inline SVG line icons.

## Output

A single self-contained HTML file with CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag. The only external files allowed are the three Google Fonts; no libraries, frameworks or WebGL. Designed for a 1440px-wide screen and responsive down to 375px, with semantic HTML. It must run smoothly at 60fps on a laptop.

Loading live preview…

## Goal Design a one-page website for Driftlight, a digital design studio. Keep the tone calm, confident and a little poetic. Use the style, layout, particle and motion rules below exactly. Replace the sample content with content that fits the goal, keeping the same sections, the same number of items in each, and similar text lengths. ## Style Keep this exactly: it is what makes the design look the way it does. The theme is the deep sea at night: glowing bioluminescent particles drifting in dark water. - Page background: a vertical gradient over the whole document height, #0B2A35 at the top, #05161D at 28%, #030E13 at 62%, #01070A at the bottom, so the page gets darker as you scroll down. - Colors: text #E8F6F5, muted text #8FB3B5, primary accent aqua #5CF2D6, secondary accent coral #FF8A65, hairlines and borders rgb(232 246 245 / 0.14), glass panels rgb(3 16 22 / 0.45). - Fonts, from Google Fonts: **Syne** (600, 700, 800) for display headings and the logo, **Instrument Serif** italic for accent words, **Manrope** (300 to 600) for everything else. - Display headings: Syne 800, uppercase, letter-spacing -0.03em, line-height 0.9. Hero heading clamp(52px, 7.4vw, 108px); section headings clamp(48px, 6.6vw, 96px) (clamp(38px, 10.5vw, 72px) under 900px wide). Every heading except the Studio heading has one accent word set in Instrument Serif italic, normal weight, not uppercase, 1.14em, line-height 0.8, colored aqua. The accent word always sits on its own line. - Body: Manrope 16px, line-height 1.6. Lead paragraphs 18px, line-height 1.65, muted, max-width 460px, with key phrases in bold (600) in the main text color, and a soft dark text-shadow 0 2px 24px rgb(1 10 14 / 0.9) so they stay readable over particles. - Kicker above each section heading: Manrope 13px semibold, uppercase, letter-spacing 0.22em, aqua, preceded by a 36px × 1px aqua line, written as "01 Studio", "02 Solutions" and so on. - Buttons are pills (999px radius), padding 16px 28px, 15px semibold. Primary: aqua background, text #02171B, shadow 0 10px 36px rgb(92 242 214 / 0.25). Secondary: transparent with a 1px hairline border. - Glass cards: 20px radius, 28px padding, glass background, 1px hairline border, backdrop blur 8px. - Content max-width 1312px including 64px side padding (20px under 900px), centered: at 1440px wide, text starts 128px from the left edge. Every section is at least 100vh tall with 140px vertical padding, content vertically centered. - Every focusable element shows a 2px aqua focus outline with 4px offset. ## Layout Fixed layers, behind all content and never blocking clicks: - **Light rays** from the surface: a 75vh tall band at the top of the viewport, made of a repeating 104deg linear gradient of soft aqua stripes (rgb(92 242 214 / 0.055)), blurred 8px, masked by an ellipse fading out downward. Its opacity drops to 0 over the first third of the page scroll, as if you are diving away from the light. - **Particle canvas**: one full-screen fixed `<canvas>` (described under Particle field). Fixed UI: - **Nav** (top, full width, padding 28px 64px): left, the logo: a 28px aqua line icon of a jellyfish (a half-circle bell with three short wavy tentacles) and the brand name in Syne 700, 18px, uppercase, letter-spacing 0.08em. Right, with 28px gaps: a muted text link "Careers", an aqua outline pill "Let's talk" (fills aqua on hover), and a 46px round menu button with two short lines. After 40px of scroll, the nav shrinks to 18px vertical padding and gets a rgb(3 14 19 / 0.55) background with a 14px backdrop blur. The menu button opens a full-screen overlay (dark, blurred) listing the five sections in Syne 800 uppercase, about 80px, each with a small coral number in front. The two lines turn into an X, and Esc or clicking a link closes it. - **Depth gauge** (fixed on the right edge, vertically centered, 36px from the edge, hidden under 900px): the word "DEPTH" (11px, uppercase, letter-spacing 0.2em, muted), a 2px × 180px track that fills from the top with an aqua-to-coral gradient as the page scrolls, and a value below it with tabular numbers, counting from "0 m" at the top of the page to "4,200 m" at the bottom, rounded to 10 m. Sections, top to bottom. Each one has a `data-shape` naming the particle shape shown while it is on screen: 1. **Hero** (jellyfish): left-aligned. An eyebrow (13px uppercase, letter-spacing 0.18em, muted, with an 8px aqua dot that slowly pulses its glow), then the heading on three lines, "Make" / "your brand" / accent "glow.", then a lead paragraph, then a primary and a secondary button. A "Scroll to dive" cue is centered at the bottom: 12px uppercase text above a 48px aqua line that keeps dripping down (scaleY 0 to 1, then fading). 2. **Studio** (sea swell): one text block on the right side of the page, ending 6% before the content's right edge: kicker, the one-word heading "Studio" (no accent word), lead paragraph (max-width 560px). The heading may be wider than the paragraph and must never be clipped. 3. **Solutions** (pearl with halo): one text block on the left: kicker, heading "What we" / accent "shape.", lead paragraph, then a row of three stats separated from the paragraph by a hairline (32px above): numbers in Syne 700, 44px, with an optional coral suffix ("+", "y"), and 13px muted labels below; then an aqua text link with an arrow that slides right on hover. 4. **Expertise** (current knot): centered kicker (lines on both sides) and heading "Area of" / accent "expertise", then 88px below, a 4-column grid of glass cards, 20px gaps. Each card has a heading (Syne 700, 15px, uppercase, letter-spacing 0.16em) with a small coral number before it ("01" to "04"), and a list of four items (16px, muted, turning bright and moving 4px right on hover). Cards lift 6px and get an aqua border on hover. 2 columns under 1100px, 1 under 560px. 5. **Crew** (school of fish): a header row with the kicker and heading "Our" + accent "crew" on the left and a short lead paragraph (max-width 340px) aligned to the bottom right. 80px below, a 4-column grid of eight people, 56px row gap; every even item is pushed down 72px so the names stagger. Each person: their first name in Syne 700 uppercase (clamp(34px, 3.9vw, 56px)), except every third item starting with the second, which uses Instrument Serif italic at clamp(40px, 4.5vw, 64px). Under the name, the role (12px uppercase, letter-spacing 0.14em, muted) and a 24px rounded-square "in" link. Names turn aqua on hover. 3 columns under 1100px and 2 under 900px, with no stagger. 6. **Contact** (nautilus): the kicker "05 Say hello", then the email address as one giant link in Instrument Serif italic (clamp(44px, 8.2vw, 124px)) followed by a 76px aqua circle with a dark diagonal arrow. On hover, a 2px aqua underline grows under the email from left to right and the arrow circle rotates 45deg. This section's bottom padding is 48px instead of 140px. Below the email, pinned to the bottom of the section: a footer with a hairline on top, in 4 columns (2fr 1fr 1fr 1fr): logo with a one-sentence description, "Studio" (address on three lines), "Social" (three links), "Contact" (phone and jobs email). Column titles 12px uppercase, letter-spacing 0.2em. Then a bottom row with the copyright on the left and "Back to the surface ↑" on the right. ## Particle field This is the centerpiece. One fixed full-screen canvas draws about **9,000 glowing particles** (4,200 under 900px wide) that form one 3D shape per section and morph into the next shape as you scroll. Draw it with the 2D canvas API and your own simple 3D math; no WebGL or libraries. - **Particles**: each one gets four stable random numbers a, b, c, d in 0..1 (from a seeded random generator, so the shapes look the same on every load), a random 3D unit direction for scattering, a random size, and a color: 60% aqua, 32% coral, 8% pale white #E8F6F5. Draw each particle as a pre-rendered 64px radial-gradient sprite: white core, the particle color at 95% at 16% of the radius, 22% at 42%, transparent at the edge. Draw sprites 3 to 7.5 device pixels wide, larger when closer, with the composite mode "lighter" so dense areas glow. Opacity follows depth: clamp(0.42 + 0.22 × z, 0.12, 1). Use devicePixelRatio, capped at 2. - **Camera**: perspective with the camera 5 units away. Project with screen = center + point × focal / (5 − z), where focal = min(viewport height × 1.3, viewport width × 2.2) × the shape's scale (on mobile, viewport width × 1.7, times 0.82). Each shape has a screen offset (ox, oy as fractions of the viewport), a tilt around the X axis, and a spin speed around the Y axis. On mobile, every shape is centered horizontally. - **Shapes**, in roughly −1.5..1.5 units, y up: 1. **Jellyfish** (ox +0.23, tilt 0.28 rad, spin 0.12 rad/s): 60% of points form the bell, a dome of radius 0.95 whose rim flares outward and droops slightly; 10% form four frilly oral arms hanging from the center to 1.15 units down; 30% form 12 tentacles, each hanging about 2.1 units from the rim, narrowing to 65% of the rim radius and swaying with sine waves that travel down them. The bell pulses gently (scale 1 ± 0.07, 1.8 rad/s). 2. **Sea swell** (ox −0.16, scale 1.25, tilt 0.6, spin 0.03): a 4.4 × 2.6 sheet of points whose height is the sum of three moving sine waves (amplitudes 0.28, 0.2, 0.12), like the surface of the sea seen from slightly above. 3. **Pearl with halo** (ox +0.22, scale 0.95, tilt 0.35, spin 0.18): half the points on a sphere of radius 0.72, half in a flat ring from radius 1.05 to 1.6 (denser toward the inside), tilted about 22deg and slowly orbiting. 4. **Current knot** (centered, scale 0.95, tilt 0.2, spin 0.15): a (2,3) torus knot of size 1.26 with a tube about 0.13 thick; the points slowly flow along the curve. 5. **School of fish** (ox +0.27, scale 0.85, tilt 0.32): 56 small fish, each about 0.34 long and 0.1 tall with a flared tail fin, circling a vertical axis on four rings (radius 0.55 to 1.39) at different heights and speeds, their tails wiggling. 6. **Nautilus shell** (ox +0.06, scale 0.7, tilt 0.18, no spin, swaying ±0.35 rad): a tube wound along a logarithmic spiral, just over two turns, the tube radius half the spiral radius, with faint growth ridges. The spiral lies flat in the screen plane, facing the viewer, so you see its full coil, not its edge. - **Scroll morph**: the scroll position maps to a continuous index across the sections (section k is fully formed when its center is in the middle of the viewport). Between two sections, wait for the first 15% of the way, morph over the middle 70% with a smoothstep ease, then hold. During a morph, each point moves from its place in shape A to its place in shape B, and is pushed out along its scatter direction by sin(π × progress) × burst, so the shape bursts into a cloud and re-forms. Burst is 2.6 units when leaving the jellyfish (a big explosion across the screen) and 1 unit for the others. The screen offset, scale, tilt and spin also blend between the two shapes. The index follows the real scroll position with easing (7.5% of the remaining distance per frame), so the morph trails smoothly. - **Cursor**: the whole field rotates toward the mouse, up to ±0.17 rad left and right and ±0.1 rad up and down, eased at 5% per frame. Ignore touch. - **Marine snow**: before the particles, draw 150 tiny dim specks (70 on mobile), radius 0.4 to 1.7px, rgb(200 240 235) at 12% to 42% opacity, drifting slowly upward, swaying sideways, and moving up faster while you scroll down, wrapping around the screen. ## Motion Easing for everything: cubic-bezier(0.22, 1, 0.36, 1). - **Headings**: each heading line is masked (overflow hidden) and its text slides up from 105% below over 1100ms when the heading is 20% visible, lines 110ms apart. - **Everything else** marked to reveal (eyebrow, kickers, paragraphs, buttons, stats, cards, crew members, email) fades in and rises 32px over 900ms, staggered 90ms apart within a section. Each element animates once (IntersectionObserver, threshold 0.2). Mark the revealed state with its own class that nothing else uses, such as `is-revealed` (not `in`, which the crew's LinkedIn badge could also use). - **Stats** count up from 0 to their value over 1400ms with a cubic ease-out when they appear, keeping their coral suffix. - **Hover**: the primary button lifts 2px and its glow grows into a 6px aqua ring; secondary buttons get an aqua border and a faint aqua fill. - **Reduced motion**: with prefers-reduced-motion: reduce, show all content immediately with no reveals, counting or looping animation. The particles still form the shape of the section on screen, but without time-based animation, bursting or easing. ## Sample content - Logo: "Driftlight". Eyebrow: "Digital studio · Since 2016". - Hero: "Make your brand glow." Lead: "We craft digital experiences where **design** meets **technology**, so your brand becomes the light people swim toward." Buttons: "Start a project", "Explore the studio". - Studio: "We believe **curiosity and craft** are what connect a brand with the people it is for. Strategy, design and code, made in one room by one team." - Solutions: "We shape **immersive digital products** around real people: websites, 3D stories and brand systems that are as clear as they are memorable." Stats: "140+ launches shipped", "27 design awards", "9y average partnership". Link: "See what we do". - Expertise: Strategy (Brand positioning, Digital strategy, Research & insight, Naming); Creative (Art direction, UI / UX design, Motion design, Illustration); Technology (Web development, WebGL & 3D, E-commerce, Headless CMS); Production (3D modelling, Video production, Sound design, Photography). - Crew lead: "**Curious people, working better together.** Committed to honest, careful work and to each other." People: Marina (Creative Director), Theo (Lead Developer), Aiko (3D Artist), Rafael (Motion Designer), Nadia (Brand Strategist), Kenji (WebGL Developer), Lucía (UI Designer), Oskar (Producer). - Contact: an email made from the brand name in lowercase, such as "hello@yourbrand.studio". Footer description: "An independent digital studio for brands that want to be found in the deep end of the internet." Address "Pier 4, Harbour Lane / 1200-109 Lisbon / Portugal". Social: Instagram, LinkedIn, Vimeo. Phone "+351 21 000 0420". Copyright "© 2026 Driftlight". ## Images This design uses no photos: every visual is the particle canvas, CSS and inline SVG. Do not add images. Draw the logo and arrows as simple inline SVG line icons. ## Output A single self-contained HTML file with CSS in a `<style>` tag and vanilla JavaScript in a `<script>` tag. The only external files allowed are the three Google Fonts; no libraries, frameworks or WebGL. Designed for a 1440px-wide screen and responsive down to 375px, with semantic HTML. It must run smoothly at 60fps on a laptop.