Vibe Coding GSAP Effects, UI Elements & Templates

From product page to your project.

01
Copy the code.
On a product you have access to, open Copy for AI and choose Copy full code. Paste the HTML, CSS and JavaScript into your coding assistant.
02
Add the setup instructions.
Choose Copy setup prompt from the same menu and paste it alongside the code. Use Copy reference to include the README too.
03
Make it yours, then test.
Tell your assistant what to change and let it adapt the source to your project. Check the result on desktop and mobile, with keyboard controls and reduced motion.

Try it with a free product.

Choose a free effect, UI element or template. Copy the code and setup instructions into your coding assistant, then tell it what to change.

Browse all effects

Typewriter Text

Watch the typewriter reveal, or replay it from the beginning.

View product

# Typewriter Text

A typewriter that types a line character by character, holds it, accelerates through deletion, and cycles to the next phrase, with optional cursor, status and progress hooks.

## index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typewriter Text Demo | GSAP Vault</title>
    <script data-cfasync="false">document.documentElement.classList.add('has-js')</script>
    <link rel="stylesheet" href="assets/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <main class="stage" aria-label="Typewriter text demonstration">
        <h1 class="line"
            data-typewriter
            data-type-speed="0.055"
            data-type-delay="0.35"
            data-type-hold="3"
            data-type-delete-speed="0.75"
            data-type-mobile="Read the docs."
            data-type-loop="Edit the code.,Ship it your way."
            data-type-loop-mobile="Edit the code.,Ship it your way.">Read the docs. Edit the code.</h1>
    </main>

```

## assets/style.css
```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --page: #ececeb;
    --surface: #f7f7f6;
    --ink: #141412;
    --ink-dim: rgba(20, 20, 18, 0.72);
    --rule: rgba(20, 20, 18, 0.14);
    --rule-strong: rgba(20, 20, 18, 0.3);

/* The caret is the thing the effect moves: it carries the accent. */
    --accent: #e5322d;
    --accent-ink: #ffffff;

color-scheme: light;
}

html {
    background: var(--page);
}

body {
    min-width: 320px;
    background: var(--page);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
}

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Full-bleed ground, one line, nothing else. */
.stage {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: clamp(1.25rem, 6vw, 5rem);
}

.line {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(64rem, 100%);
    min-width: 0;
    font-size: clamp(1.75rem, 5.5vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    white-space: nowrap;
}

/* The script measures every phrase before it types, so the line stays hidden
   until it is fitted rather than flashing at its unfitted size. */
.has-js:not(.typewriter-ready) .line {
    visibility: hidden;
}

.typewriter__cursor {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.08em;
    height: 1em;
    margin-left: 0.14em;
    background: var(--accent);
    animation: type-cursor 0.75s steps(1) infinite;
}

@keyframes type-cursor {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

.has-js .line {
        visibility: visible;
    }

.typewriter__cursor {
        display: none;
    }
}

```

## assets/script.js
```javascript
/**
 * Typewriter Text
 *
 * Scroll-triggered character typing with looping phrases, an accelerating
 * delete pass, and optional UI hooks for cursor, phase, and progress feedback.
 *
 * @plugins ScrollTrigger
 * @techniques text-animation, typewriter, scroll-reveal, infinite-loop
 */

(function onReady(init) {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})(function initTypewriterText() {
    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {
        document.documentElement.classList.remove('has-js');
        return;
    }

gsap.registerPlugin(ScrollTrigger);

const handlers = new Map();
    const ownedTriggers = [];
    const timelines = [];
    const resizeHandlers = [];

function fitStaticLine(el) {
        el.style.removeProperty('font-size');
        const naturalSize = parseFloat(getComputedStyle(el).fontSize);
        const available = el.clientWidth;
        const required = el.scrollWidth;
        if (!available || !required) return;
        el.style.fontSize = Math.max(11, naturalSize * Math.min(1, (available - 2) / required)) + 'px';
    }

const ctx = gsap.context(function gsapContextCallback() {
        const mm = gsap.matchMedia();

mm.add({
            isMotion: '(prefers-reduced-motion: no-preference)',
            isReduced: '(prefers-reduced-motion: reduce)'
        }, function matchMediaCallback(context) {
            const isMotion = context.conditions.isMotion;
            const elements = document.querySelectorAll('[data-typewriter]');

elements.forEach(function initElement(el) {
                const speedValue = parseFloat(el.dataset.typeSpeed);
                const delayValue = parseFloat(el.dataset.typeDelay);
                const isCompact = window.matchMedia('(max-width: 600px)').matches;
                const loopSource = isCompact && el.dataset.typeLoopMobile
                    ? el.dataset.typeLoopMobile
                    : el.dataset.typeLoop;
                const holdValue = parseFloat(el.dataset.typeHold);
                const deleteValue = parseFloat(el.dataset.typeDeleteSpeed);
                const CONFIG = {
                    speed: Number.isFinite(speedValue) ? Math.max(0.01, speedValue) : 0.045,
                    delay: Number.isFinite(delayValue) ? Math.max(0, delayValue) : 0,
                    hold: Number.isFinite(holdValue) ? Math.max(0.4, holdValue) : 1.8,
                    deleteSpeed: Number.isFinite(deleteValue) ? Math.max(0.1, deleteValue) : 0.5,
                    cursor: el.dataset.typeCursor !== 'false',
                    loop: (loopSource || '')
                        .split(',')
                        .map(function trimPhrase(phrase) { return phrase.trim(); })
                        .filter(Boolean)
                };

const fullText = (isCompact && el.dataset.typeMobile
                    ? el.dataset.typeMobile
                    : el.textContent).trim();
                if (!fullText) return;
                const phrases = [fullText].concat(CONFIG.loop);

const system = el.closest('[data-typewriter-system]');
                const cursor = system ? system.querySelector('[data-typewriter-cursor]') : null;
                const status = system ? system.querySelector('[data-typewriter-status]') : null;
                const progress = system ? system.querySelector('[data-typewriter-progress]') : null;
                const replay = system ? system.querySelector('[data-typewriter-replay]') : null;

el.setAttribute('aria-label', fullText);

if (!isMotion) {
                    el.textContent = fullText;
                    el.classList.add('is-complete');
                    if (system) system.dataset.phase = 'ready';
                    if (status) status.textContent = 'READY';
                    if (progress) gsap.set(progress, { scaleX: 1 });
                    const fitReduced = function fitReducedLine() { fitStaticLine(el); };
                    requestAnimationFrame(fitReduced);
                    if (document.fonts && document.fonts.ready) document.fonts.ready.then(fitReduced);
                    window.addEventListener('resize', fitReduced);
                    resizeHandlers.push(fitReduced);
                    return;
                }

el.textContent = '';
                const textSpan = document.createElement('span');
                textSpan.className = 'typewriter__text';
                textSpan.setAttribute('aria-hidden', 'true');
                el.appendChild(textSpan);

let generatedCursor = null;
                if (CONFIG.cursor && !cursor) {
                    generatedCursor = document.createElement('span');
                    generatedCursor.className = 'typewriter__cursor';
                    generatedCursor.setAttribute('aria-hidden', 'true');
                    el.appendChild(generatedCursor);
                }
                const activeCursor = CONFIG.cursor ? (cursor || generatedCursor) : null;
                if (cursor && !CONFIG.cursor) cursor.hidden = true;

const looping = phrases.length > 1;
                const proxy = { chars: 0 };
                let currentChars = Array.from(fullText);

requestAnimationFrame(fitPhrases);
                if (document.fonts && document.fonts.ready) document.fonts.ready.then(fitPhrases);
                window.addEventListener('resize', fitPhrases);
                resizeHandlers.push(fitPhrases);

function render() {
                    if (!textSpan.isConnected) return;
                    textSpan.textContent = currentChars.slice(0, Math.round(proxy.chars)).join('');
                }

function setPhase(phase, label) {
                    el.classList.toggle('is-typing', phase === 'typing');
                    el.classList.toggle('is-deleting', phase === 'deleting');
                    el.classList.toggle('is-complete', phase === 'ready');
                    if (system) system.dataset.phase = phase;
                    if (status) status.textContent = label;
                }

phrases.forEach(function addPhrase(phrase, index) {
                    const chars = Array.from(phrase);
                    const typeDuration = chars.length * CONFIG.speed;
                    const deleteDuration = chars.length * CONFIG.speed * CONFIG.deleteSpeed;

tl.call(function preparePhrase() {
                        currentChars = chars;
                        proxy.chars = 0;
                        render();
                        setPhase('typing', 'COMPOSE');
                        if (progress) gsap.set(progress, { scaleX: 0 });
                    });

tl.to(proxy, {
                        chars: chars.length,
                        duration: typeDuration,
                        ease: 'none',
                        snap: { chars: 1 },
                        onUpdate: render,
                        onComplete: function dispatchComplete() {
                            el.dispatchEvent(new CustomEvent('typewriter:complete', {
                                bubbles: true,
                                detail: { text: phrase, index: index }
                            }));
                        }
                    });

if (progress) {
                        tl.to(progress, { scaleX: 1, duration: typeDuration, ease: 'none' }, '<');
                    }

if (!looping) {
                        tl.call(function settleOnce() { setPhase('ready', 'READY'); });
                        return;
                    }

tl.call(function beginHold() {
                        setPhase('holding', 'HOLD');
                    });
                    tl.to({}, { duration: CONFIG.hold });
                    tl.call(function beginDelete() {
                        setPhase('deleting', 'PURGE');
                    });
                    tl.to(proxy, {
                        chars: 0,
                        duration: deleteDuration,
                        ease: 'power3.in',
                        snap: { chars: 1 },
                        onUpdate: render
                    });
                    if (progress) {
                        tl.to(progress, { scaleX: 0, duration: deleteDuration, ease: 'power3.in' }, '<');
                    }
                });

if (activeCursor) {
                    tl.eventCallback('onRepeat', function resetCursor() {
                        gsap.set(activeCursor, { scaleY: 1, opacity: 1 });
                    });
                }

const trigger = ScrollTrigger.create({
                    trigger: el,
                    start: 'top 85%',
                    once: true,
                    onEnter: function playTimeline() { tl.play(); }
                });
                ownedTriggers.push(trigger);

if (replay && !handlers.has(replay)) {
                    const handleReplay = function handleReplay() {
                        if (!el.isConnected) return;
                        tl.pause(0);
                        proxy.chars = 0;
                        render();
                        tl.play();
                    };
                    replay.addEventListener('click', handleReplay);
                    handlers.set(replay, handleReplay);
                }
            });

document.documentElement.classList.add('typewriter-ready');

return function cleanupMatchMedia() {
                handlers.forEach(function removeHandler(handler, element) {
                    element.removeEventListener('click', handler);
                });
                handlers.clear();
                timelines.forEach(function killTimeline(timeline) { timeline.kill(); });
                timelines.length = 0;
                ownedTriggers.forEach(function killTrigger(trigger) { trigger.kill(); });
                ownedTriggers.length = 0;
                resizeHandlers.forEach(function removeFitHandler(handler) {
                    window.removeEventListener('resize', handler);
                });
                resizeHandlers.length = 0;
            };
        });
    });

window.gsapContext = ctx;

window.addEventListener('beforeunload', function cleanupBeforeUnload() {
        ctx.revert();
    }, { once: true });
});

```

Use these files together. Keep the dependencies referenced in the HTML, or reuse the versions already installed in your project.

# Start Here: AI Setup Prompt

Typewriter Text is a production-ready GSAP animation effect from GSAP Vault. This file is designed for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants.

## Product context

- Product: Typewriter Text
- Type: animation effect
- Description: A typewriter that types a line character by character, holds it, accelerates through deletion, and cycles to the next phrase, with optional cursor, status and progress hooks.
- GSAP plugins: ScrollTrigger
- Techniques: text-animation, typewriter, scroll-reveal, infinite-loop
- Lenis smooth scrolling: not required
- Difficulty: beginner

The code and reference documentation pasted alongside this prompt are the source of truth. Ask for any missing source, documentation or linked assets before changing the implementation.

## Copy and paste this into your coding assistant

```text
Integrate the supplied Typewriter Text animation effect into my project.

Before editing anything:
1. Inspect my project to identify its framework, routing, file structure, styling system, existing GSAP setup, and component conventions.
2. Read the supplied HTML, CSS, JavaScript and reference documentation in this conversation or my project, plus any linked local assets. Ask for anything missing.
3. Explain briefly where the animation effect should live and which existing files you plan to change.

During implementation:
1. Adapt the supplied code to my project's conventions instead of introducing a duplicate styling, routing, or dependency system.
2. Preserve the visual design, interaction model, and animation timing unless I explicitly request changes.
3. Scope selectors and animation queries so they cannot affect unrelated components.
4. Reuse the project's existing GSAP installation where possible. Register only the plugins this product needs: ScrollTrigger.
5. Preserve responsive behaviour, keyboard operation, semantic HTML, ARIA attributes, and prefers-reduced-motion handling.
6. Preserve or add correct GSAP, ScrollTrigger, observer, ticker, and event-listener cleanup for the detected framework and routing model.
7. Keep the page usable if JavaScript or an animation dependency fails. Do not leave content hidden in fallback or reduced-motion states.
8. Do not replace working local assets with placeholders, remove licence notices, or add dependencies without explaining why.
9. Test for console errors, layout overflow, missing assets, and broken interactions at desktop and mobile sizes.

When finished:
1. List every file changed or created.
2. Summarise any framework-specific adaptation you made.
3. Identify the safest colours, copy, timing, easing, and content values I can customise.
4. Report what you tested and flag anything that still needs manual review.

Ask before making a major design change, changing the animation concept, or replacing an existing project dependency.
```

## Suggested follow-up requests

- “Match this to my existing design tokens without changing the animation.”
- “Replace the demo copy with my supplied content and keep the current hierarchy.”
- “Convert this implementation to my framework's component pattern with complete cleanup.”
- “Audit the result for mobile overflow, reduced motion, keyboard access, and console errors.”

---

Downloaded from https://gsapvault.com. See the included LICENSE.txt where present for usage terms.

# Typewriter Text

A scroll-triggered typewriter sequence that types rapidly, holds, accelerates through deletion, and cycles through optional phrases. Cursor, status, progress, and background hooks can react to every phase.

## Quick Start

**1. Add to your HTML `<head>`:**

```html
<link rel="stylesheet" href="path/to/style.css">
```

**2. Add before the closing `</body>` tag:**

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="path/to/script.js"></script>
```

**3. Add `data-typewriter` to text in your `<body>`:**

```html
<h1 data-typewriter>Read the docs. Edit the code.</h1>
```

The element's complete text is the static fallback. When it reaches 85% of the viewport, the script clears it and types it back once.

## Options

| Attribute | Values | Default | Description |
|---|---:|---:|---|
| `data-type-speed` | Seconds per character | `0.045` | Typing speed; lower values type faster |
| `data-type-delay` | Seconds | `0` | Delay after the element enters the viewport |
| `data-type-cursor` | `true`, `false` | `true` | Adds the generated cursor when no external cursor hook exists |
| `data-type-loop` | Comma-separated phrases | none | Phrases to rotate through after the element's own text |
| `data-type-mobile` | Text | element text | Shorter initial phrase below 600px to preserve a single line |
| `data-type-loop-mobile` | Comma-separated phrases | `data-type-loop` | Shorter looping phrases below 600px |
| `data-type-hold` | Seconds | `1.8` | Time each looping phrase remains complete |
| `data-type-delete-speed` | Multiplier | `0.5` | Delete duration relative to typing; lower is faster |

The original `speed`, `delay`, `cursor`, and looping phrase attributes remain compatible. `hold` and `delete-speed` are optional additions.

## Examples

### Looping Phrases

**Add to your HTML `<body>`:**

```html
<h1 data-typewriter
    data-type-speed="0.055"
    data-type-delay="0.35"
    data-type-hold="3"
    data-type-delete-speed="0.75"
    data-type-mobile="Read the docs."
    data-type-loop="Ship it your way.,One line typed on scroll."
    data-type-loop-mobile="Ship it your way.,Typed on scroll.">
  Read the docs. Edit the code.
</h1>
```

Phrases are separated by commas, so a phrase cannot contain one.

The element's own text always runs first. Every phrase types linearly, holds, then deletes with `power3.in` acceleration before the next phrase lands.

### Deliberate One-Time Reveal

**Add to your HTML `<body>`:**

```html
<h2 data-typewriter data-type-speed="0.08" data-type-delay="0.5">
  Deliberate, dramatic typing.
</h2>
```

Omit `data-type-loop` for a one-time scroll-triggered sequence.

### Hide the Generated Cursor

**Add to your HTML `<body>`:**

```html
<p data-typewriter data-type-cursor="false">Clean typing, no cursor.</p>
```

## Optional System Hooks

Wrap the line in `data-typewriter-system` to synchronize your own interface. All hooks are optional.

**Add to your HTML `<body>`:**

```html
<section data-typewriter-system data-phase="ready">
  <h2 data-typewriter data-type-loop="Edit the code.,Ship it your way.">
    Read the docs.
  </h2>

<span data-typewriter-cursor aria-hidden="true"></span>
  <span data-typewriter-status aria-hidden="true">READY</span>
  <span class="progress" aria-hidden="true">
    <span data-typewriter-progress></span>
  </span>
  <button type="button" data-typewriter-replay>Replay</button>
</section>
```

During playback, the wrapper's `data-phase` changes between `typing`, `holding`, `deleting`, and `ready`. Use those values in CSS to react without adding more JavaScript:

**Add to your CSS:**

```css
[data-typewriter-system][data-phase="typing"] [data-typewriter-cursor] {
  background: lime;
}

[data-typewriter-system][data-phase="deleting"] [data-typewriter-cursor] {
  background: cyan;
  transform: scaleY(0.45);
}
```

## Generated CSS Classes

| Class | Description |
|---|---|
| `.typewriter__text` | Span containing the animated characters |
| `.typewriter__cursor` | Generated cursor when `data-type-cursor` is enabled |
| `.is-typing` | Applied while characters are being added |
| `.is-deleting` | Applied while characters are being removed |
| `.is-complete` | Applied after a non-looping sequence settles |

## Events

Events bubble from the animated element.

**Add to your JavaScript:**

```javascript
const el = document.querySelector('[data-typewriter]');

el.addEventListener('typewriter:start', (event) => {
  console.log('Sequence started:', event.detail.text);
});

el.addEventListener('typewriter:complete', (event) => {
  console.log('Phrase complete:', event.detail.text, event.detail.index);
});
```

| Event | Detail | Description |
|---|---|---|
| `typewriter:start` | `{ text }` | Fires when the timeline first begins |
| `typewriter:complete` | `{ text, index }` | Fires whenever a phrase finishes typing |

## Cleanup

The effect stores its GSAP context on `window.gsapContext`. In a page transition or component teardown, call:

**Add to your JavaScript teardown:**

```javascript
window.gsapContext?.revert();
```

This kills the effect's timelines and ScrollTriggers and removes replay listeners.

## Accessibility

- The element's original complete phrase is its no-JavaScript fallback and accessible label.
- Generated character and cursor spans are hidden from assistive technology.
- `prefers-reduced-motion: reduce` skips typing, deletion, cursor motion, and looping, leaving the strongest complete phrase visible.
- Replay uses a native `<button>`, so it works with keyboard and touch input.
- Reserve enough height for the longest phrase if your phrases vary substantially, preventing layout shift.

## Dependencies

**Required:**

- GSAP 3.12+
- ScrollTrigger

No SplitText or smooth-scroll library is required.

# iOS Toggle Switch

Native checkbox toggle whose knob can be tapped or dragged, snaps to the nearer side, stretches while pressed and cross-fades the track colour.

## index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow">
  <title>iOS Toggle Switch &mdash; GSAP Vault</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/style.css">
  <style>
    /* Demo-only toolbar; not part of the component. */
    .showcase-toolbar {
      position: fixed; inset: 0 0 auto 0; z-index: 1000; height: 44px;
      display: flex; align-items: center; gap: 10px; padding: 0 12px;
      flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
      background: var(--ground-2); border-bottom: 1px solid var(--line);
      color: var(--ink-3); font-family: var(--font); font-size: 0.75rem;
      white-space: nowrap;
    }
    .showcase-toolbar::-webkit-scrollbar { display: none; }
    .showcase-toolbar__prompt { color: var(--ink-2); margin-right: auto; }
    .showcase-toolbar__group { display: flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--raised); }
    .showcase-toolbar button {
      appearance: none; border: 0; cursor: pointer; font: inherit;
      min-height: 26px; padding: 0 9px; border-radius: 4px;
      background: transparent; color: var(--ink-2);
    }
    .showcase-toolbar button:hover { background: var(--hover); color: var(--ink); }
    .showcase-toolbar button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
    .showcase-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    /* One row on a phone: the strip stays 44px, so the prompt goes rather
       than wrapping and breaking the body's reserved padding. */
    @media (max-width: 620px) { .showcase-toolbar__prompt { display: none; } }
    /* Demo-only: the "State labels" control hides the optional [data-switch-label]. */
    body[data-labels="off"] .switch-state { display: none; }
  </style>
</head>
<body data-variant="light" data-labels="on">

<div class="showcase-toolbar">
    <span class="showcase-toolbar__prompt">Tap a switch, or take hold of its knob and push it across.</span>
    <div class="showcase-toolbar__group">
      <button type="button" id="labels-btn" aria-pressed="true">State labels</button>
    </div>
    <div class="showcase-toolbar__group">
      <button type="button" id="reset-btn">Reset</button>
    </div>
    <div class="showcase-toolbar__group" role="group" aria-label="Theme">
      <button class="variant-btn" type="button" data-variant="light" aria-pressed="true">Light</button>
      <button class="variant-btn" type="button" data-variant="dark" aria-pressed="false">Dark</button>
    </div>
  </div>

<main class="stage">
    <div class="stage__inner">
      <ul class="switch-list">
        <li class="switch-row">
          <span class="switch-text">
            <label class="switch-name" for="notify-mentions">Mentions</label>
            <small class="switch-note">Someone names you in a comment or a task.</small>
          </span>
          <span class="switch-state" data-switch-label>On</span>
          <span class="switch" data-switch data-on="On" data-off="Off">
            <input type="checkbox" class="switch-input" id="notify-mentions" name="mentions" role="switch" checked data-default="on">
            <span class="switch-knob"></span>
          </span>
        </li>
        <li class="switch-row">
          <span class="switch-text">
            <label class="switch-name" for="notify-assignments">Assignments</label>
            <small class="switch-note">Work is handed to you, or handed on.</small>
          </span>
          <span class="switch-state" data-switch-label>On</span>
          <span class="switch" data-switch data-on="On" data-off="Off">
            <input type="checkbox" class="switch-input" id="notify-assignments" name="assignments" role="switch" checked data-default="on">
            <span class="switch-knob"></span>
          </span>
        </li>
        <li class="switch-row">
          <span class="switch-text">
            <label class="switch-name" for="notify-digest">Daily digest</label>
            <small class="switch-note">One summary each morning instead of alerts.</small>
          </span>
          <span class="switch-state" data-switch-label>Off</span>
          <span class="switch" data-switch data-on="On" data-off="Off">
            <input type="checkbox" class="switch-input" id="notify-digest" name="digest" role="switch" data-default="off">
            <span class="switch-knob"></span>
          </span>
        </li>
        <li class="switch-row">
          <span class="switch-text">
            <label class="switch-name" for="notify-product">Product updates</label>
            <small class="switch-note">Release notes when something you use changes.</small>
          </span>
          <span class="switch-state" data-switch-label>Off</span>
          <span class="switch" data-switch data-on="On" data-off="Off">
            <input type="checkbox" class="switch-input" id="notify-product" name="product" role="switch" data-default="off">
            <span class="switch-knob"></span>
          </span>
        </li>
        <li class="switch-row is-disabled">
          <span class="switch-text">
            <label class="switch-name" for="notify-marketing">Marketing emails</label>
            <small class="switch-note">Turned off for the whole workspace by an admin.</small>
          </span>
          <span class="switch-state" data-switch-label>Off</span>
          <span class="switch" data-switch data-on="On" data-off="Off">
            <input type="checkbox" class="switch-input" id="notify-marketing" name="marketing" role="switch" disabled data-default="off">
            <span class="switch-knob"></span>
          </span>
        </li>
      </ul>
    </div>
  </main>

// Demo-only: the optional state label, and a reset back to the defaults.
      var labelsBtn = document.getElementById('labels-btn');
      labelsBtn.addEventListener('click', function () {
        var on = document.body.getAttribute('data-labels') !== 'off';
        document.body.setAttribute('data-labels', on ? 'off' : 'on');
        labelsBtn.setAttribute('aria-pressed', String(!on));
      });
      document.getElementById('reset-btn').addEventListener('click', function () {
        document.querySelectorAll('.switch-input').forEach(function (input) {
          var want = input.dataset.default === 'on';
          if (input.checked === want) return;
          input.checked = want;
          input.dispatchEvent(new Event('change', { bubbles: true }));
        });
      });
    })();
  </script>
</body>
</html>

```

## assets/style.css
```css
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Theme tokens ----------
   Two themes, one design: `light` and `dark`, selected with data-variant on
   <body> in this demo, or on any wrapper around the switch in your page.

Every colour the component uses is a custom property here, and so is every
   colour the demo's ground uses, so one attribute flips both. The script reads
   --track-off and --track-on with getComputedStyle at the moment a gesture
   starts and interpolates between them, so re-valuing a theme, or adding one,
   needs no JavaScript change. */
body,
body[data-variant="light"] {
  color-scheme: light;

/* the ground */
  --ground: #f2f2f1;
  --ground-2: #e9e9e7;
  --raised: #fbfbfa;
  --hover: #e2e2df;
  --ink: #141412;
  --ink-2: #4b4b47;
  --ink-3: #676762;
  --line: rgba(20, 20, 18, 0.12);
  --line-strong: rgba(20, 20, 18, 0.22);
  --shadow: 0 1px 2px rgba(20, 20, 18, 0.06), 0 4px 12px rgba(20, 20, 18, 0.06);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --radius: 10px;
  --radius-sm: 6px;

/* the switch */
  --accent: #00b8a9;
  --accent-ink: #141412;
  --track-off: #d2d2ce;
  --track-on: var(--accent);
  --track-disabled: #e2e2df;
  --track-radius: 9999px;
  --track-border: 1px solid rgba(20, 20, 18, 0.12);
  --track-pad: 3px;
  --track-w: 44px;
  --track-h: 26px;
  --knob-bg: #ffffff;
  --knob-disabled: #f4f4f2;
  --knob-radius: 9999px;
  --knob-shadow: 0 1px 2px rgba(20, 20, 18, 0.28);
  --focus: var(--accent);
}

body[data-variant="dark"] {
  color-scheme: dark;

--ground: #141414;
  --ground-2: #0f0f0f;
  --raised: #1c1c1c;
  --hover: #232323;
  --ink: #f1efea;
  --ink-2: #c9c7c1;
  --ink-3: #9a988f;
  --line: rgba(241, 239, 234, 0.12);
  --line-strong: rgba(241, 239, 234, 0.22);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);

--accent: #00b8a9;
  --accent-ink: #141412;
  --track-off: #3a3a38;
  --track-on: var(--accent);
  --track-disabled: #262626;
  --track-border: 1px solid rgba(241, 239, 234, 0.14);
  --knob-bg: #f1efea;
  --knob-disabled: #4a4a47;
  --knob-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- The component ---------- */

/* The row is the only markup around the switch the script knows about: it
   scopes the optional [data-switch-label]. Layout is yours; this is a flex
   row so a name, a description and the switch sit on one line. */
.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.switch-text { flex: 1 1 auto; min-width: 0; }
.switch-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.switch-note {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-top: 1px;
}
.switch-row.is-disabled .switch-name { color: var(--ink-3); cursor: not-allowed; }
.switch-state {
  font-size: 0.75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
}

.switch {
  position: relative;
  flex: none;
  display: inline-block;
  width: var(--track-w);
  height: var(--track-h);
  background: var(--track-off);
  border: var(--track-border);
  border-radius: var(--track-radius);
}
.switch.is-on { background: var(--track-on); }

/* The input covers the whole track: a click anywhere on it is a real
   checkbox click, and Tab plus Space work without any script. */
.switch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}
.switch-input:disabled { cursor: not-allowed; }
.switch:has(.switch-input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.switch:has(.switch-input:disabled) { background: var(--track-disabled); }

/* No CSS transform here, ever: GSAP owns the knob's x and scaleX. Its
   resting position is the track padding, expressed with left and top. */
.switch-knob {
  position: absolute;
  top: var(--track-pad);
  left: var(--track-pad);
  width: calc(var(--track-h) - 2 * var(--track-pad) - 2px);
  height: calc(var(--track-h) - 2 * var(--track-pad) - 2px);
  background: var(--knob-bg);
  border-radius: var(--knob-radius);
  box-shadow: var(--knob-shadow);
  z-index: 3;
  cursor: grab;
  touch-action: pan-y;
}
.switch-knob:active { cursor: grabbing; }
.switch-input:disabled ~ .switch-knob { cursor: not-allowed; background: var(--knob-disabled); box-shadow: none; }

/* Without JavaScript the checkbox is still the control: :checked moves the
   knob and colours the track with plain CSS. With JavaScript running, GSAP
   owns the knob's x from its left-padding origin, so the CSS shift is off. */
.switch-input:checked ~ .switch-knob { left: auto; right: var(--track-pad); }
.switch:has(.switch-input:checked) { background: var(--track-on); }
.has-js .switch-input:checked ~ .switch-knob { left: var(--track-pad); right: auto; }

/* A list of switch rows: the neighbours a settings switch needs to read as
   one. Hairline between rows, one raised surface under them. */
.switch-list {
  list-style: none;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.switch-list > .switch-row { padding: 13px 16px; border-top: 1px solid var(--line); }
.switch-list > .switch-row:first-child { border-top: 0; }

/* ---- demo furniture: the ground ------------------------------------------
   The centred stage below is the demo page, not part of the component. It is
   `.stage-*` only, the script never reads a stage class, and it lives here so
   thumbnail.html can reuse it. Delete it in your own project. */
html { overflow-x: clip; }
body {
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding-top: 44px; /* the demo toolbar strip */
}
.stage { min-height: calc(100svh - 44px); display: grid; place-items: center; padding: 32px 20px; }
.stage__inner { width: 100%; max-width: 520px; }

@media (max-width: 480px) {
  .stage { padding: 20px 14px; }
  .switch-list > .switch-row { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage * { transition: none !important; }
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

```

## assets/script.js
```javascript
/**
 * iOS Toggle Switch
 *
 * A native checkbox styled as a switch. The knob can be tapped or dragged;
 * on release it snaps to the nearer side, and a short push still toggles.
 * GSAP owns the knob's x, so the knob must never carry a CSS transform.
 *
 * @plugins Draggable
 */

document.documentElement.classList.add('has-js');

const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const SNAP = 0.4;    // knob travel time on a tap
    const TAP = 8;       // px of movement still counted as a tap, not a drag

// Helpers are declared before use: the demo build converts function
    // declarations into non-hoisted consts.
    const cssVar = (name) => getComputedStyle(document.body).getPropertyValue(name).trim();

function setup(track) {
        const input = track.querySelector('.switch-input');
        const knob = track.querySelector('.switch-knob');
        const row = track.closest('.switch-row');
        const label = row ? row.querySelector('[data-switch-label]') : null;
        const onText = track.dataset.on || 'On';
        const offText = track.dataset.off || 'Off';
        if (!input || !knob) return;

let travel = 0;
        let mix = null;
        let startX = 0;
        let drag = null;

function measure() {
            const pad = parseFloat(getComputedStyle(knob).left) || 0;
            travel = Math.max(0, track.clientWidth - knob.offsetWidth - pad * 2);
            if (drag) drag.applyBounds({ minX: 0, maxX: travel });
        }

function press() {
            if (reduce) return;
            // Stretch toward the side the knob is heading for.
            gsap.to(knob, {
                scaleX: 1.16,
                transformOrigin: input.checked ? '100% 50%' : '0% 50%',
                duration: 0.16,
                ease: 'power2.out'
            });
        }

measure();
        gsap.set(knob, { x: input.checked ? travel : 0, y: 0 });
        paint(false);

input.addEventListener('change', () => paint(true));

if (hasDraggable && !input.disabled) {
            drag = Draggable.create(knob, {
                type: 'x',
                bounds: { minX: 0, maxX: travel },
                cursor: 'grab',
                activeCursor: 'grabbing',
                allowContextMenu: true,
                onPress: function () {
                    startX = this.x;
                    // Colours are read at the call site, so a variant only
                    // has to change CSS.
                    mix = gsap.utils.interpolate(cssVar('--track-off'), cssVar('--track-on'));
                    press();
                },
                onDrag: function () {
                    if (!travel || !mix) return;
                    gsap.set(track, { backgroundColor: mix(gsap.utils.clamp(0, 1, this.x / travel)) });
                },
                onRelease: function () {
                    const moved = Math.abs(this.x - startX);
                    // A nudge counts as a tap, so a short push still toggles
                    // rather than snapping back to where it came from.
                    const next = moved < TAP ? !input.checked : this.x > travel / 2;
                    if (next === input.checked) {
                        paint(true);
                        return;
                    }
                    input.checked = next;
                    input.dispatchEvent(new Event('change', { bubbles: true }));
                }
            })[0];
        }

document.querySelectorAll('[data-switch]').forEach(setup);
});
})();

```

Use these files together. Keep the dependencies referenced in the HTML, or reuse the versions already installed in your project.

# Start Here: AI Setup Prompt

iOS Toggle Switch is a production-ready GSAP UI component from GSAP Vault. This file is designed for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants.

## Product context

- Product: iOS Toggle Switch
- Type: UI component
- Description: Native checkbox toggle whose knob can be tapped or dragged, snaps to the nearer side, stretches while pressed and cross-fades the track colour.
- GSAP plugins: Draggable
- Techniques: micro-interaction, draggable, touch-drag, click-toggle, form-animation
- Lenis smooth scrolling: not required
- Difficulty: intermediate

The code and reference documentation pasted alongside this prompt are the source of truth. Ask for any missing source, documentation or linked assets before changing the implementation.

## Copy and paste this into your coding assistant

```text
Integrate the supplied iOS Toggle Switch UI component into my project.

Before editing anything:
1. Inspect my project to identify its framework, routing, file structure, styling system, existing GSAP setup, and component conventions.
2. Read the supplied HTML, CSS, JavaScript and reference documentation in this conversation or my project, plus any linked local assets. Ask for anything missing.
3. Explain briefly where the UI component should live and which existing files you plan to change.

During implementation:
1. Adapt the supplied code to my project's conventions instead of introducing a duplicate styling, routing, or dependency system.
2. Preserve the visual design, interaction model, and animation timing unless I explicitly request changes.
3. Scope selectors and animation queries so they cannot affect unrelated components.
4. Reuse the project's existing GSAP installation where possible. Register only the plugins this product needs: Draggable.
5. Preserve responsive behaviour, keyboard operation, semantic HTML, ARIA attributes, and prefers-reduced-motion handling.
6. Preserve or add correct GSAP, ScrollTrigger, observer, ticker, and event-listener cleanup for the detected framework and routing model.
7. Keep the page usable if JavaScript or an animation dependency fails. Do not leave content hidden in fallback or reduced-motion states.
8. Do not replace working local assets with placeholders, remove licence notices, or add dependencies without explaining why.
9. Test for console errors, layout overflow, missing assets, and broken interactions at desktop and mobile sizes.

Ask before making a major design change, changing the animation concept, or replacing an existing project dependency.
```

## Suggested follow-up requests

---

Downloaded from https://gsapvault.com. See the included LICENSE.txt where present for usage terms.

# iOS Toggle Switch

Native checkbox toggle whose knob can be tapped or dragged, snaps to the nearer side, stretches while pressed and cross-fades the track colour.

## What's Included

- `index.html`: the demo page and the markup to copy
- `assets/style.css`: component styles, plain CSS custom properties for colours
- `assets/script.js`: readable, commented source with an `onReady` guard

- Tap the track or drag the knob, both reach the same state
- Draggable with bounds, snapping to the nearer side on release
- A short drag still toggles, so a nudge is never ignored
- Track colour cross-fades between the off and on custom properties
- Knob stretches toward the direction of travel while pressed
- Optional label whose text follows the state
- Disabled state that refuses the pointer and the keyboard

## Quick Start

**1. Add to your HTML `<head>`:**

```html
<link rel="stylesheet" href="assets/style.css">
```

**2. Add to your `<body>`:**

```html
<span class="switch" data-switch data-on="On" data-off="Off">
  <input type="checkbox" class="switch-input" id="toggle" name="cellular" role="switch">
  <span class="switch-knob"></span>
</span>
```

Every element carrying `data-switch` is wired up, so a page can hold as many as it likes. An optional state label is any element with `data-switch-label` inside the same `.switch-row`, and its text follows the switch's `data-on` / `data-off` values. Add `disabled` to the input for a disabled switch and `is-disabled` to the row for the muted styling.

**3. Add before the closing `</body>` tag:**

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Draggable.min.js"></script>
<script src="assets/script.js"></script>
```

## How It Works

**The checkbox is the state.** The transparent input covers the whole track, so a click anywhere on it is a real checkbox click and the browser does the toggling. Every other path, the drag and the keyboard, writes `checked` and dispatches `change`; the animation is a single listener on that event. Nothing keeps the state in a variable of its own, which is why the switch cannot drift out of step with the form.

**Snap, then reset.** Draggable is created with `type: 'x'` and numeric bounds measured from the track. On release the knob is either within `TAP` pixels of where it started, which counts as a tap and toggles, or it snaps to whichever end it is nearer. The snap tween always finishes with `y: 0` and calls `draggable.update()`, so the next press starts from a clean measurement.

**Colour from custom properties.** The track colour is interpolated with `gsap.utils.interpolate` between the values read from `--track-off` and `--track-on` when the gesture starts, so it tracks the knob live during a drag and cross-fades on a tap.

## Using It With Your Own Design

What the component actually needs from your markup: the `.switch` wrapper with `data-switch`, a checkbox with class `switch-input` inside it, and a `.switch-knob` sibling after that input. Everything else, the `.switch-list` card, the row layout, the descriptions and the state text, is styling you can keep, change or delete.

The non-obvious CSS the effect depends on:

- **The knob must carry no CSS `transform`.** GSAP owns its `x` and `scaleX`. A CSS `translateX` underneath is parsed as a pixel `x` that never clears, and the knob ends up permanently offset.
- The knob's resting position is `left: var(--track-pad)`, and `x: 0` means "off". Move the knob with `left`, not with a transform, if you change the geometry.
- The input is `position: absolute; inset: 0; opacity: 0` and sits **below** the knob in stacking order, so the knob receives the drag and the rest of the track receives the click.
- `.has-js` is added by the script. Without it, `:checked ~ .switch-knob` and `:has(.switch-input:checked)` move and colour the switch in plain CSS, so a no-JavaScript visitor still gets a working, legible control.

## Themes

The switch ships in two themes, `light` (the default) and `dark`. They are one
design at two sets of token values, not two designs. Pick one with an attribute:

```html
<body data-variant="dark">
```

The attribute can sit on `<body>`, as it does in the demo, or on any wrapper
around the switch in your own page. Nothing else changes: same markup, same
script, and no theme name is ever read in JavaScript.

Each `body[data-variant="..."]` block in `assets/style.css` sets the whole
token list:

| Token | What it colours |
|-------|-----------------|
| `--accent` | the on state, and the focus ring |
| `--accent-ink` | text drawn on the accent |
| `--track-off` / `--track-on` | the track in each state; the script interpolates between these two |
| `--track-disabled` / `--knob-disabled` | the disabled switch |
| `--track-border`, `--track-radius`, `--track-pad`, `--track-w`, `--track-h` | the track's hairline, shape and size |
| `--knob-bg`, `--knob-radius`, `--knob-shadow` | the knob |
| `--focus` | the focus ring on the track |
| `--ink`, `--ink-3`, `--line`, `--raised`, `--radius` | the row text, the hairlines and the list surface |

To wear your own brand, re-value `--accent` and the two track colours in both
blocks; the script reads `--track-off` and `--track-on` with `getComputedStyle`
at the moment a gesture starts, so it follows whatever you set. The demo's
toolbar toggle and the `?variant=dark` URL parameter only set that attribute,
then dispatch `resize` so the Draggable bounds re-measure.

The `--ground*` tokens in the same blocks belong to the demo page, not to the
switch. See the note below.

## The demo page is furniture

The demo is the component and nothing else: five switch rows on the grey
ground, at the width a settings list would really get. The toolbar strip across
the top (`.showcase-toolbar`) and the centring `.stage` wrapper are demo-only
and are not part of what you bought; the script never reads either. Delete them
and the switch is unaffected. The `.switch-list` card is the one piece worth
keeping: a switch reads as a setting when it has siblings.

## Customisation

- Colours, radii and shadows live in `assets/style.css` as custom properties per theme; the accent is `#00b8a9`.
- `SNAP` and `TAP` at the top of `assets/script.js` are the knob travel time and the movement threshold below which a drag counts as a tap. Raise `TAP` for a more forgiving nudge.
- The snap easing is `back.out(1.7)`. Drop the overshoot to `power3.out` for a flatter, more system-like feel.
- The press stretch is `scaleX: 1.16` with the transform origin set to whichever side the knob is heading for.
- Switch size is `--track-w`, `--track-h` and `--track-pad`; the knob sizes itself from the track height, so one number changes the whole control.

## Keyboard and screen readers

- The control is a native `<input type="checkbox">` with `role="switch"`, so the browser owns the whole contract: **Tab** moves to it, **Space** toggles it, it submits with the form, and a screen reader announces the accessible name followed by "on" or "off" from the real `checked` state.
- The visible name is a `<label for="...">`, so clicking the text toggles the switch too.
- A focus ring is drawn on the track with `:has(.switch-input:focus-visible)`.
- The disabled switch uses the real `disabled` attribute; Draggable is not created for it, so the knob cannot be dragged either.
- `prefers-reduced-motion: reduce` sets the knob and the track colour instantly and skips the press stretch. Dragging still works.

## Requirements

- GSAP 3.12+ and the Draggable plugin
- No build step, no framework

# Coming Soon Template

A free single-screen holding page dressed as a picture house: a projector beam rakes across a dark auditorium, a house light wanders the room, and the countdown is an Academy leader whose sweep hand turns continuously while the day count cuts once a day.

## index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="The Lantern - a two-screen repertory picture house opening on Sharrow Vale Road, Sheffield, autumn 2027. Leave your email and we'll hold you a seat.">
    <title>The Lantern - Coming Soon Template | GSAP Vault</title>
    <link rel="stylesheet" href="assets/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600&family=Cabin:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>

<div class="house" aria-hidden="true">
    
    <div class="spot" data-spot></div>

<div class="beam-pivot" data-beam>
        <div class="beam">
            <canvas class="beam-dust" data-dust></canvas>
        </div>
    </div>
</div>

<header class="top" data-fade>
    <p class="wordmark">The Lantern<span class="wordmark-lamp" aria-hidden="true"></span></p>
    <p class="top-place"><span class="top-street">Sharrow Vale Rd &middot; </span>Sheffield</p>
</header>

<main class="stage">
    
    <div class="leader-block" data-leader data-open="2027-10-02T19:30:00" aria-hidden="true">
        <div class="leader">
            <span class="leader-sweep" data-leader-sweep></span>
            <span class="leader-ring"></span>
            <span class="leader-cross"></span>
            <span class="leader-num" data-leader-num></span>
        </div>
        <p class="leader-cap">
            <span class="leader-cap-key" data-leader-key></span>
            <span class="leader-cap-sub" data-leader-sub></span>
        </p>
    </div>

<div class="slide" data-slide>
        <p class="kicker" data-fade>Coming soon</p>

<h1 class="title">
            <span class="line"><span class="line-inner">The lights go down</span></span>
            <span class="line"><span class="line-inner">on Sharrow Vale</span></span>
            <span class="line"><span class="line-inner">in autumn 2027.</span></span>
        </h1>

<p class="sub" data-fade>Two screens and a hundred and eighty seats on Sharrow Vale
        Road. Repertory six nights a week, 35mm when the print exists, a bar that stays
        open long after the credits, and not one second of advertising.</p>

<ul class="facts" data-fade>
            <li class="fact"><span class="fact-key">First screening</span><span class="fact-val">2 October 2027</span></li>
            <li class="fact"><span class="fact-key">Formats</span><span class="fact-val">35mm &amp; 4K digital</span></li>
            <li class="fact"><span class="fact-key">Seats</span><span class="fact-val">180 across two screens</span></li>
        </ul>

<form class="notify" action="#" method="post" data-notify data-fade>
            <div class="notify-field">
                <label class="sr-only" for="email">Email address</label>
                <input class="notify-input" id="email" type="email" name="email"
                       placeholder="you@example.com" required autocomplete="email">
                <button class="notify-btn" type="submit">Join the queue</button>
            </div>
            <p class="notify-done" hidden>Seat held. We'll be in touch before opening night.</p>
            <p class="notify-status sr-only" role="status" aria-live="polite"></p>
            <p class="notify-note">One email when we open. Nothing else, ever.</p>
        </form>
    </div>
</main>

<footer class="foot" data-fade>
    <div class="foot-links">
        <a class="foot-link" href="#">Instagram</a>
        <a class="foot-link" href="mailto:hello@thelantern.film">hello@thelantern.film</a>
    </div>
    <p class="foot-note">&copy; 2027 The Lantern Picture House</p>
</footer>

<canvas class="grain" data-grain aria-hidden="true"></canvas>

</body>
</html>

```

## assets/style.css
```css
/* ============================================
   THE LANTERN - COMING SOON TEMPLATE
   A holding page shaped like the card a picture
   house projects before the film starts.

Two grounds rather than one: a near-black
   auditorium, and a lit bone slide floating on
   it. Type lives on the slide, chrome lives on
   the dark. The countdown is an Academy leader.
   ============================================ */

:root {
    /* An auditorium with the lamp on: two surfaces, one accent, and one
       warm reserved for the light. Contrast measured as used, composited:

ON THE SLIDE (bone #EDE6D8)
         ink headline and fact values          15.17
         ink-dim body copy, sub and note        7.19
         oxblood kicker, fact keys, done state  6.97
         bone on the oxblood button             6.97
       ON THE DARK (house #1A0E11)
         bone wordmark and footer links        15.17
         house-dim place, caption, copyright    6.31

Three rules the light imposes, worth keeping if you recolour:

- The beam peaks at bulb 0.30, which would drop house-dim to 3.21
         on bare ground. .top and .foot carry a house scrim at 0.94 that
         holds house-dim at 6.10 and bone at 14.66 wherever the beam
         falls. Keep the scrims if you move the beam.
       - The beam renders behind the slide. In front of it, it lifts the
         bone and pulls every dark-on-light pair down at once.
       - --bulb is light, never type: on the bone slide it is 1.63.
         --ink and --ink-dim belong on the slide, --house-dim on the dark.

Reskin = repaint the seven values below, keeping the -rgb triples
       in step; beam, spot, dust, leader and scrims resolve from them. */
    --house: #1A0E11;          /* the dark auditorium, page base */
    --screen: #EDE6D8;         /* the lit slide, and type on the dark */
    --ink: #1A0E11;            /* primary type, on the slide only */
    --ink-dim: #574549;        /* body copy, on the slide only */
    --house-dim: #A99089;      /* secondary type, on the dark only */
    --oxblood: #8E2233;        /* kicker, rule, button */
    --bulb: #F0B44E;           /* the lamp - light only, never type */

--house-rgb: 26, 14, 17;
    --screen-rgb: 237, 230, 216;
    --ink-rgb: 26, 14, 17;
    --oxblood-rgb: 142, 34, 51;
    --bulb-rgb: 240, 180, 78;

--font-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    --font-body: 'Cabin', system-ui, sans-serif;

/* scrollbars and native controls follow the palette */
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--house);
    color: var(--screen);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

/* ---------- The auditorium ---------- */

.house {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* A little lamp spill low and right, so the dark is not flat. */
    background:
        radial-gradient(120vmin 90vmin at 88% 74%,
            rgba(var(--bulb-rgb), 0.09),
            rgba(var(--bulb-rgb), 0) 70%),
        var(--house);
}

/* A soft house light that wanders the room. Kept low: it crosses
   everything, and the scrims are sized for the beam, not for both. */
.spot {
    position: absolute;
    top: 0;
    left: 0;
    width: 62vmin;
    height: 62vmin;
    margin: -31vmin 0 0 -31vmin;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(var(--bulb-rgb), 0.10),
        rgba(var(--bulb-rgb), 0.04) 48%,
        rgba(var(--bulb-rgb), 0) 76%);
    will-change: transform;
}

/* Carries only the pointer lean, so GSAP's transform never fights the
   beam's own angle - and the angle survives with scripting off. */
.beam-pivot {
    position: absolute;
    inset: 0;
    transform-origin: 88% 14%;
    will-change: transform, opacity;
}

/* A rotated band. The vertical gradient gives the shaft soft edges
   across its width, the mask fades it with distance from the lamp, and
   the rotation sets the angle. A hard-clipped polygon instead reads as
   haze rather than as light. */
.beam {
    position: absolute;
    top: 8%;
    left: -20%;
    width: 142%;
    height: 42%;
    /* Negative so the far end falls away: CSS positive rotation is
       clockwise, which would swing it up instead. */
    transform: rotate(-20deg);
    transform-origin: 86% 40%;
    background: linear-gradient(to bottom,
        rgba(var(--bulb-rgb), 0) 0%,
        rgba(var(--bulb-rgb), 0.10) 22%,
        rgba(var(--bulb-rgb), 0.44) 47%,
        rgba(var(--bulb-rgb), 0.36) 57%,
        rgba(var(--bulb-rgb), 0.09) 80%,
        rgba(var(--bulb-rgb), 0) 100%);
    -webkit-mask-image: linear-gradient(to left, #000 4%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0.45) 75%, transparent 100%);
    mask-image: linear-gradient(to left, #000 4%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0.45) 75%, transparent 100%);
    opacity: 0.9;
}

.beam-dust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

header, main, footer { position: relative; z-index: 1; }

/* ---------- Academy leader ---------- */

/* In the flow above the card by default, so a phone gets the countdown
   too; it only pins out into the dark strip beside the slide once there
   is one. See the wide-screen block further down. */
.leader-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(9px, 1.5vh, 15px);
    pointer-events: none;
}

.leader {
    position: relative;
    width: clamp(108px, 26vw, 172px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.leader > * { grid-area: 1 / 1; }

.leader-ring {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(var(--bulb-rgb), 0.42);
    border-radius: 50%;
}

/* The crosshair: two hairlines through the centre, as on real leader. */
.leader-cross {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(to right, rgba(var(--bulb-rgb), 0.3) 0 100%) center / 100% 1px no-repeat,
        linear-gradient(to bottom, rgba(var(--bulb-rgb), 0.3) 0 100%) center / 1px 100% no-repeat;
}

/* The sweep hand, as a rotating wedge of light rather than a line. */
.leader-sweep {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        rgba(var(--bulb-rgb), 0.26),
        rgba(var(--bulb-rgb), 0.10) 32%,
        rgba(var(--bulb-rgb), 0) 62%,
        rgba(var(--bulb-rgb), 0) 100%);
    will-change: transform;
}

/* Sized for four digits: a launch three years out is 1,000+ days. */
.leader-num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.8rem, 5.6vw, 3rem);
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--screen);
    text-shadow: 0 0 26px rgba(var(--bulb-rgb), 0.5);
    font-variant-numeric: lining-nums;
    /* The numeral cuts rather than tweening. It changes once a day, so
       there is nothing to ease. */
}

.leader-cap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    text-align: center;
}

.leader-cap-key {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--house-dim);
}

.leader-cap-sub {
    font-family: var(--font-display);
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    color: var(--house-dim);
}

/* Filled by JS. Hidden until then so that with scripting off the leader
   is an empty focus chart rather than a stale or invented number. */
.leader-block:not(.is-live) .leader-cap { display: none; }

/* Grain rides on top of the whole print. Overlay against mid-grey noise
   means the tile only ever nudges contrast either side of what is
   already there, so it textures the image without shifting any pair. */
.grain {
    position: fixed;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.55;
}

/* ---------- Top bar ---------- */

/* Scrims put the chrome on near-solid house wherever the beam lands, so
   its contrast does not depend on the beam's geometry missing it. */
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: clamp(18px, 2.8vh, 28px) clamp(22px, 5vw, 54px);
    background: linear-gradient(to bottom,
        rgba(var(--house-rgb), 0.94) 0%,
        rgba(var(--house-rgb), 0.94) 58%,
        rgba(var(--house-rgb), 0) 100%);
}

.wordmark {
    display: flex;
    align-items: center;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.32rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The lamp: a small lit dot, the only round thing on the page. */
.wordmark-lamp {
    width: 7px;
    height: 7px;
    margin-left: 0.6em;
    border-radius: 50%;
    background: var(--bulb);
    box-shadow: 0 0 12px rgba(var(--bulb-rgb), 0.9);
}

.top-place {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--house-dim);
}

/* ---------- Stage and slide ---------- */

/* Column so the leader can stack above the card on narrow screens. On
   wide screens the leader is pinned out of flow and this centres the
   card alone, as before. */
.stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3.4vh, 34px);
    width: 100%;
    padding: clamp(10px, 2vh, 26px) clamp(18px, 5vw, 54px);
}

/* The lit card. The inner shadow is light falling off toward the edges
   the way it does on a real screen; the outer glow is the room picking
   up the spill. */
.slide {
    position: relative;
    /* Narrow enough that the condensed headline fills its own measure,
       and narrow enough to leave dark either side for the beam. */
    width: min(820px, 100%);
    padding: clamp(28px, 4.6vw, 54px) clamp(24px, 4.4vw, 56px) clamp(30px, 4.4vw, 50px);
    background:
        radial-gradient(140% 130% at 72% 18%,
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0) 62%),
        var(--screen);
    color: var(--ink);
    border-radius: 3px;
    box-shadow:
        0 0 0 1px rgba(var(--ink-rgb), 0.10),
        0 40px 90px -30px rgba(0, 0, 0, 0.7),
        0 0 120px -20px rgba(var(--bulb-rgb), 0.22);
    will-change: transform, opacity;
}

.kicker {
    margin: 0 0 clamp(14px, 2.2vh, 22px);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--oxblood);
}

.title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 5.6vw, 4.5rem);
    line-height: 0.96;
    letter-spacing: -0.005em;
    text-transform: uppercase;
}

.title .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.title .line-inner { display: inline-block; will-change: transform; }

.rule { margin: clamp(20px, 3vh, 30px) 0 0; }

.rule-bar {
    display: block;
    height: 2px;
    background: var(--oxblood);
    will-change: transform;
}

.sub {
    margin: clamp(18px, 2.6vh, 26px) 0 0;
    max-width: 58ch;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    color: var(--ink-dim);
}

/* ---------- Facts ---------- */

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 3.4vw, 46px);
    margin: clamp(20px, 3vh, 30px) 0 0;
    padding: 0;
    list-style: none;
}

.fact { display: flex; flex-direction: column; gap: 3px; }

.fact-key {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--oxblood);
}

.fact-val {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: var(--ink);
}

/* ---------- Notify form ---------- */

.notify {
    margin: clamp(24px, 3.6vh, 38px) 0 0;
    max-width: 540px;
}

.notify-field { display: flex; gap: 10px; }

.notify-input {
    flex: 1;
    min-width: 0;
    padding: 13px 16px;
    background: rgba(var(--ink-rgb), 0.04);
    border: 1px solid rgba(var(--ink-rgb), 0.34);
    border-radius: 4px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
}

.notify-input::placeholder { color: var(--ink-dim); opacity: 1; }

.notify-input:focus-visible {
    outline: 2px solid var(--oxblood);
    outline-offset: 2px;
    border-color: transparent;
}

.notify-btn {
    padding: 13px 24px;
    border: none;
    border-radius: 4px;
    background: var(--oxblood);
    color: var(--screen);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.notify-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -6px rgba(var(--oxblood-rgb), 0.6);
}

.notify-btn:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.notify-done {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.3rem;
    letter-spacing: 0.01em;
    color: var(--oxblood);
}

.notify-note {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: var(--ink-dim);
}

/* ---------- Footer ---------- */

.foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: clamp(16px, 2.6vh, 26px) clamp(22px, 5vw, 54px);
    font-size: 0.82rem;
    background: linear-gradient(to top,
        rgba(var(--house-rgb), 0.94) 0%,
        rgba(var(--house-rgb), 0.94) 58%,
        rgba(var(--house-rgb), 0) 100%);
}

.foot-links { display: flex; gap: 22px; }

.foot-link {
    color: var(--screen);
    text-decoration: underline;
    text-decoration-color: rgba(var(--bulb-rgb), 0.55);
    text-underline-offset: 4px;
}

.foot-link:hover { text-decoration-color: var(--bulb); }

.foot-link:focus-visible {
    outline: 2px solid var(--bulb);
    outline-offset: 3px;
    border-radius: 2px;
}

.foot-note { margin: 0; color: var(--house-dim); }

/* ---------- Utilities ---------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Compact ---------- */

/* Wide enough for a dark strip beside the card: pin the leader into it
   and left-align its caption. Below this it stays in the flow above the
   card, which is where the markup puts it. */
@media (min-width: 1181px) {
    .leader-block {
        position: fixed;
        left: clamp(28px, 4vw, 74px);
        bottom: clamp(96px, 14vh, 150px);
        z-index: 1;
        align-items: flex-start;
    }

.leader-cap { text-align: left; }
}

@media (max-width: 720px) {
    .facts { gap: 14px 28px; }
    .fact { flex: 1 1 40%; }
}

@media (max-width: 560px) {
    .top { align-items: center; }
    .top-place { letter-spacing: 0.12em; }
    .top-street { display: none; }
    .kicker { letter-spacing: 0.24em; }
    .notify-field { flex-direction: column; }
    .notify-btn { width: 100%; }
    /* Stacked: "First screening" is wider than the other keys, so a
       shared key column either wraps or leaves the values unaligned. */
    .facts { flex-direction: column; gap: 14px; }
    .fact { flex: 1 1 auto; gap: 2px; }
    .foot { flex-direction: column; align-items: flex-start; gap: 10px; }
    /* The beam is a wide-room effect; on a phone it just muddies. */
    .beam { opacity: 0.55; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .beam-dust,
    .grain { display: none; }
    /* The leader keeps its ring, crosshair and numbers; only the
       rotating sweep goes. */
    .leader-sweep { display: none; }
    .notify-btn { transition: none; }
    .notify-btn:hover { transform: none; }
}

```

## assets/script.js
```javascript
/* ============================================
   THE LANTERN - COMING SOON TEMPLATE
   Single-screen holding page. Sections are
   independent: delete any block from the HTML
   and the rest keeps working.

The opening date lives on the markup, not in
   here:
   <div data-leader data-open="2027-10-02T19:30:00">
   See the README for the full contract.
   ============================================ */

/* Runs the init straight away if the DOM is already parsed (a script
   executed late or deferred, e.g. by Cloudflare Rocket Loader), and
   waits for DOMContentLoaded otherwise. */
(function onReady(init) {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})(function initLantern() {

const ctx = gsap.context(function () {
        const mm = gsap.matchMedia();

mm.add({
            isActive: '(prefers-reduced-motion: no-preference)',
            isFine: '(pointer: fine) and (prefers-reduced-motion: no-preference)',
            isReduced: '(prefers-reduced-motion: reduce)'
        }, function (context) {
            const cond = context.conditions;
            const cleanups = [];

if (cond.isReduced) {
                /* Static page, but still a working countdown: the leader
                   fills its numbers and skips the sweep. */
                initLeader(cleanups, false);
                initForm(false);
                return function cleanup() {
                    cleanups.forEach(function (fn) { fn(); });
                    cleanups.length = 0;
                };
            }

initBeam(cleanups, cond.isFine);
            initSpot(cleanups);
            initDust(cleanups);
            initLeader(cleanups, true);
            initGrain(cleanups);
            initReveal();
            initForm(true);

return function cleanup() {
                cleanups.forEach(function (fn) { fn(); });
                cleanups.length = 0;
            };
        });
    });

window.gsapContext = ctx;

/* ---------- Beam: the lamp, breathing and leaning ---------- */
    function initBeam(cleanups, isFine) {
        const beam = document.querySelector('[data-beam]');
        if (!beam) return;

/* The breathe goes on the inner band; the load sequence fades the
           pivot. One element, one owner of a property - both writing
           opacity to the same node leaves the beam dim and arbitrary. */
        const band = beam.querySelector('.beam');
        if (band) {
            /* Fourteen seconds a cycle. Long enough that the eye reads it
               as the room rather than as an animation with a tempo. */
            gsap.to(band, {
                opacity: 0.66,
                duration: 14,
                ease: 'sine.inOut',
                yoyo: true,
                repeat: -1
            });
        }

if (!isFine) return;

/* The beam pivots at the projection port, top right, the way a
           real one does. Tiny range on purpose: the room shifting, not a
           searchlight following the cursor. The origin is the pivot's
           own CSS transform-origin - GSAP inherits it, so the angle
           lives in one place. */
        const rotTo = gsap.quickTo(beam, 'rotation', { duration: 1.5, ease: 'power2.out' });
        const yTo = gsap.quickTo(beam, 'yPercent', { duration: 1.5, ease: 'power2.out' });

function lean(e) {
            rotTo((e.clientY / window.innerHeight - 0.5) * 1.1);
            yTo((e.clientX / window.innerWidth - 0.5) * -2.4);
        }

window.addEventListener('pointermove', lean);
        cleanups.push(function () { window.removeEventListener('pointermove', lean); });
    }

/* ---------- Spotlight: a house light wandering the room ---------- */
    function initSpot(cleanups) {
        const spot = document.querySelector('[data-spot]');
        if (!spot) return;

/* Two sines per axis at frequencies with no common multiple, so
           the path never closes. A single sine is a loop, and the eye
           learns a loop; this has no period to learn, so it reads as
           drift rather than as animation. */
        const setX = gsap.quickSetter(spot, 'x', 'px');
        const setY = gsap.quickSetter(spot, 'y', 'px');

function drift(time) {
            const w = window.innerWidth;
            const h = window.innerHeight;
            setX(w * (0.5 + 0.30 * Math.sin(time * 0.083) + 0.13 * Math.sin(time * 0.191)));
            setY(h * (0.46 + 0.24 * Math.sin(time * 0.117) + 0.11 * Math.sin(time * 0.237)));
        }

gsap.ticker.add(drift);
        cleanups.push(function () { gsap.ticker.remove(drift); });
    }

/* ---------- Academy leader: the countdown ---------- */
    /* Split by how often each part changes: the sweep is continuous (one
       turn a minute, which is what reads as live), the day count changes
       once a day, hours and minutes once a minute. Every value is read
       from the clock rather than accumulated, so nothing drifts or has
       to catch up after a backgrounded tab. */
    function initLeader(cleanups, animate) {
        const block = document.querySelector('[data-leader]');
        if (!block) return;

const target = new Date(block.getAttribute('data-open')).getTime();
        if (isNaN(target)) return;      /* bad date: leave the chart empty */

const sweep = block.querySelector('[data-leader-sweep]');
        const num = block.querySelector('[data-leader-num]');
        const key = block.querySelector('[data-leader-key]');
        const sub = block.querySelector('[data-leader-sub]');

const setRotation = (animate && sweep)
            ? gsap.quickSetter(sweep, 'rotation', 'deg')
            : null;

let lastDays = -1;
        let lastMins = -1;
        let opened = false;

function write() {
            const now = Date.now();

/* One revolution a minute, straight off the wall clock. */
            if (setRotation) setRotation(((now % 60000) / 60000) * 360);

if (opened) return;

const ms = target - now;
            if (ms <= 0) {
                opened = true;
                if (num) num.textContent = '0';
                if (key) key.textContent = 'Now open';
                if (sub) sub.textContent = '';
                return;
            }

const days = Math.floor(ms / 86400000);
            const mins = Math.floor(ms / 60000) % 60;

/* Written only when the value actually changes, so on all but
               a handful of frames this whole function is one setter. */
            if (days !== lastDays) {
                lastDays = days;
                if (num) num.textContent = String(days);
                if (key) key.textContent = days === 1 ? 'Day to opening' : 'Days to opening';
            }
            if (mins !== lastMins) {
                lastMins = mins;
                const hours = Math.floor(ms / 3600000) % 24;
                if (sub) sub.textContent = hours + ' hr ' + mins + ' min';
            }
        }

write();
        block.classList.add('is-live');

if (!animate) {
            /* No sweep to drive, so a slow interval keeps the text honest
               without putting anything on screen in motion. */
            const timer = window.setInterval(write, 30000);
            cleanups.push(function () { window.clearInterval(timer); });
            return;
        }

gsap.ticker.add(write);
        cleanups.push(function () { gsap.ticker.remove(write); });
    }

/* ---------- Dust: what the beam is actually showing you ---------- */
    function initDust(cleanups) {
        const canvas = document.querySelector('[data-dust]');
        if (!canvas) return;
        const cx = canvas.getContext('2d');
        if (!cx) return;

let w = 0;
        let h = 0;
        const dpr = Math.min(window.devicePixelRatio || 1, 2);
        const specks = [];
        const COUNT = 38;

function size() {
            w = canvas.offsetWidth;
            h = canvas.offsetHeight;
            if (!w || !h) return;
            canvas.width = Math.round(w * dpr);
            canvas.height = Math.round(h * dpr);
            cx.setTransform(dpr, 0, 0, dpr, 0, 0);
        }
        size();

for (let i = 0; i < COUNT; i++) {
            specks.push({
                x: Math.random() * (w || 1),
                y: Math.random() * (h || 1),
                r: 0.5 + Math.random() * 1.5,
                v: 3 + Math.random() * 8,            /* px per second, upward */
                sway: 8 + Math.random() * 18,
                phase: Math.random() * Math.PI * 2,
                a: 0.14 + Math.random() * 0.34
            });
        }

gsap.ticker.add(draw);
        window.addEventListener('resize', size);
        cleanups.push(function () {
            gsap.ticker.remove(draw);
            window.removeEventListener('resize', size);
        });
    }

/* ---------- Grain: one tile, moved, at 24fps ---------- */
    function initGrain(cleanups) {
        const canvas = document.querySelector('[data-grain]');
        if (!canvas) return;
        const cx = canvas.getContext('2d');
        if (!cx) return;

/* Noise is expensive to generate and cheap to move, so the tile is
           built once and re-offset every frame. Rebuilding full-screen
           noise per frame costs more than the rest of the page. */
        const TILE = 128;
        const tile = document.createElement('canvas');
        tile.width = TILE;
        tile.height = TILE;
        const tcx = tile.getContext('2d');
        if (!tcx) return;

const img = tcx.createImageData(TILE, TILE);
        for (let i = 0; i < img.data.length; i += 4) {
            /* Centred on mid-grey so the overlay blend nudges contrast
               both ways and shifts no measured pair. */
            const v = 128 + (Math.random() - 0.5) * 96;
            img.data[i] = v;
            img.data[i + 1] = v;
            img.data[i + 2] = v;
            img.data[i + 3] = 255;
        }
        tcx.putImageData(img, 0, 0);

const pattern = cx.createPattern(tile, 'repeat');
        if (!pattern) return;

let w = 0;
        let h = 0;

function size() {
            /* Device-pixel-ratio 1 on purpose: grain should be the size of
               grain, not of a pixel, and this is a quarter of the fill
               cost on a retina screen. */
            w = window.innerWidth;
            h = window.innerHeight;
            canvas.width = w;
            canvas.height = h;
            cx.fillStyle = pattern;
        }
        size();

/* A film gate runs at 24 frames a second and so does this. Fast
           enough to read as grain rather than as a pulse. */
        const STEP = 1 / 24;
        let acc = 0;

function draw(time, delta) {
            acc += delta / 1000;
            if (acc < STEP) return;
            acc %= STEP;
            const ox = Math.floor(Math.random() * TILE);
            const oy = Math.floor(Math.random() * TILE);
            cx.setTransform(1, 0, 0, 1, -ox, -oy);
            cx.fillRect(ox, oy, w, h);
        }

/* ---------- Reveal: the lamp strikes, the slide comes up ---------- */
    function initReveal() {
        /* Start states are set here, not in the stylesheet, so the page
           is complete with JavaScript disabled. */
        const beam = document.querySelector('[data-beam]');
        const slide = document.querySelector('[data-slide]');
        const lines = gsap.utils.toArray('.title .line-inner');
        const rule = document.querySelector('.rule-bar');
        const leader = document.querySelector('[data-leader]');
        const fades = gsap.utils.toArray('[data-fade]');

const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });

if (beam) {
            /* Struck, not flicked. Nothing on this page strobes: a
               flickering light source is a photosensitivity risk. */
            gsap.set(beam, { opacity: 0 });
            tl.to(beam, { opacity: 1, duration: 1.6, ease: 'power2.inOut' }, 0);
        }
        if (slide) {
            gsap.set(slide, { opacity: 0, y: 16, scale: 0.988 });
            tl.to(slide, { opacity: 1, y: 0, scale: 1, duration: 1.1 }, 0.15);
        }
        if (lines.length) {
            /* yPercent and y together: GSAP parses a CSS translate into a
               pixel y, and tweening only yPercent would strand it. */
            gsap.set(lines, { yPercent: 112, y: 0 });
            tl.to(lines, { yPercent: 0, y: 0, duration: 1.05, stagger: 0.1, ease: 'power4.out' }, 0.4);
        }
        if (rule) {
            gsap.set(rule, { scaleX: 0, transformOrigin: 'left center' });
            tl.to(rule, { scaleX: 1, duration: 1.2, ease: 'power2.inOut' }, 0.8);
        }
        if (fades.length) {
            gsap.set(fades, { opacity: 0, y: 14 });
            tl.to(fades, { opacity: 1, y: 0, duration: 0.85, stagger: 0.08 }, 0.6);
        }
        if (leader) {
            /* Threads up last, the way the projectionist would. */
            gsap.set(leader, { opacity: 0, scale: 0.9 });
            tl.to(leader, { opacity: 1, scale: 1, duration: 0.9, ease: 'back.out(1.4)' }, 1.15);
        }
    }

/* ---------- Notify form ---------- */
    function initForm(animate) {
        const form = document.querySelector('[data-notify]');
        if (!form) return;
        const field = form.querySelector('.notify-field');
        const doneEl = form.querySelector('.notify-done');
        const status = form.querySelector('.notify-status');

form.addEventListener('submit', function (e) {
            e.preventDefault();               /* wire to your list provider: see README */
            if (!form.checkValidity()) { form.reportValidity(); return; }
            if (!field || !doneEl) return;

if (status) status.textContent = 'Saved. We will email you once, when we open.';

if (!animate) {
                field.hidden = true;
                doneEl.hidden = false;
                return;
            }
            gsap.timeline()
                .to(field, { opacity: 0, y: -10, duration: 0.3, ease: 'power2.in' })
                .set(field, { display: 'none' })
                .call(function () { doneEl.hidden = false; })
                .set(doneEl, { opacity: 0, y: 12 })
                .to(doneEl, { opacity: 1, y: 0, duration: 0.5, ease: 'back.out(1.6)' });
        });
    }
});

```

Use these files together. Keep the dependencies referenced in the HTML, or reuse the versions already installed in your project.

# Start Here: AI Setup Prompt

Coming Soon Template is a production-ready GSAP website template from GSAP Vault. This file is designed for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants.

## Product context

- Product: Coming Soon Template
- Type: website template
- Description: A free single-screen holding page dressed as a picture house: a projector beam rakes across a dark auditorium, a house light wanders the room, and the countdown is an Academy leader whose sweep hand turns continuously while the day count cuts once a day.
- GSAP plugins: GSAP core only
- Techniques: countdown, ambient, canvas, particle-system, blend-mode, load-sequence, scroll-reveal, stagger, quickTo, mouse-follow, organic-motion, micro-interaction
- Lenis smooth scrolling: not required
- Difficulty: beginner

The code and reference documentation pasted alongside this prompt are the source of truth. Ask for any missing source, documentation or linked assets before changing the implementation.

## Brand and content details to provide

Fill these in before pasting the prompt, or ask your assistant to collect them:

- Brand or project name: [ADD HERE]
- Industry and audience: [ADD HERE]
- Primary goal and CTA: [ADD HERE]
- Brand colours and typefaces: [ADD HERE]
- Content or existing copy to use: [ADD HERE]
- Deployment target: [ADD HERE]

## Copy and paste this into your coding assistant

```text
Integrate the supplied Coming Soon Template website template into my project.

Before editing anything:
1. Inspect my project to identify its framework, routing, file structure, styling system, existing GSAP setup, and component conventions.
2. Read the supplied HTML, CSS, JavaScript and reference documentation in this conversation or my project, plus any linked local assets. Ask for anything missing.
3. Explain briefly where the website template should live and which existing files you plan to change.

During implementation:
1. Adapt the supplied code to my project's conventions instead of introducing a duplicate styling, routing, or dependency system.
2. Preserve the visual design, interaction model, and animation timing unless I explicitly request changes.
3. Scope selectors and animation queries so they cannot affect unrelated components.
4. Reuse the project's existing GSAP installation where possible. Register only the plugins this product needs: GSAP core only.
5. Preserve responsive behaviour, keyboard operation, semantic HTML, ARIA attributes, and prefers-reduced-motion handling.
6. Preserve or add correct GSAP, ScrollTrigger, observer, ticker, and event-listener cleanup for the detected framework and routing model.
7. Keep the page usable if JavaScript or an animation dependency fails. Do not leave content hidden in fallback or reduced-motion states.
8. Do not replace working local assets with placeholders, remove licence notices, or add dependencies without explaining why.
9. Test for console errors, layout overflow, missing assets, and broken interactions at desktop and mobile sizes.

Ask before making a major design change, changing the animation concept, or replacing an existing project dependency.
```

## Suggested follow-up requests

---

Downloaded from https://gsapvault.com. See the included LICENSE.txt where present for usage terms.

# Coming Soon Template — "The Lantern"

A complete single-screen holding page shaped like the still card a picture house
projects before the film: a dark auditorium, a lit slide floating in it, a
projector beam raking down from the top right with dust turning over inside it,
and film grain over the whole print. The demo dresses it as The Lantern, a
two-screen repertory cinema opening in Sheffield; every word and colour is
yours to change.

This template is free. It runs on GSAP core alone — no plugins, no smooth-scroll
library, one CDN script tag.

## Quick Start

1. Copy `index.html` and the `assets/` folder to your server. There is no build
   step; it deploys as static files.
2. Set your opening date in `data-open` on the leader (see below).
3. Replace the wordmark, headline, sub line, facts and footer with your own
   words.
4. Wire the email form to your list provider (see below).

Open `index.html` in a browser. That's the whole install.

## The countdown

The countdown is an Academy leader — the focus chart spliced onto the head of a
reel — and it is a real countdown to your opening date, not decoration.

Set the date on the markup. There is no date logic to edit:

```html
<div class="leader-block" data-leader data-open="2027-10-02T19:30:00">
```

`data-open` is read in the visitor's local time zone. For one global moment,
append an offset: `2027-10-02T19:30:00+00:00`. Once the date passes, the leader
reads **Now open**. If the attribute is missing or unparseable the leader stays
an empty ring rather than showing an invented number.

### Why it is split three ways

Each part of the countdown updates at a different rate, and that is the whole
design:

| Part | Changes | Why |
|---|---|---|
| Sweep hand | continuously, one turn a minute | proves the page is live |
| Day count | once a day | the number people actually want |
| Hours and minutes | once a minute | confirms it is ticking |

**There is no seconds digit anywhere, on purpose.** On a launch months out, a
seconds digit is the only thing that ever visibly moves and it carries the least
information, so the page spends all its motion budget on its least useful
element. Worse, a one-second cadence leaves no rest state — by the time a roll
has eased and settled, the next one is already due — which reads as restless
rather than alive. No easing curve fixes that, because the problem is the beat,
not the curve.

The sweep hand does that job instead. It turns continuously, driven straight
off the wall clock, so it never starts, never stops, and cannot drift or arrive
late. The numerals **cut** rather than tweening, which is correct for something
that changes once a day: there is no settle to overrun.

Every value is read from the clock rather than accumulated, so a backgrounded
tab comes back correct with no catch-up.

### Placement

It sits in the flow above the card by default, so a phone gets it too. Above
1180px, where there is dark either side of the slide, it pins into the left
strip. It carries the countdown, so it is never the piece that gets dropped at
small sizes.

## The wandering house light

The soft glow drifting around the auditorium is two sines per axis at
frequencies with no common multiple:

```js
x = w * (0.5  + 0.30*sin(t*0.083) + 0.13*sin(t*0.191))
y = h * (0.46 + 0.24*sin(t*0.117) + 0.11*sin(t*0.237))
```

A single sine is a loop, and a loop long enough to notice is still a loop the
eye eventually learns. Summing two that never line up gives a path that never
closes, so it reads as drift rather than as animation. Change the four
frequencies if you want a different wander — just keep them from landing on
simple ratios of each other, or the path snaps back into an obvious figure.

## The facts row

```html
<li class="fact">
    <span class="fact-key">First screening</span>
    <span class="fact-val">2 October 2027</span>
</li>
```

Edit it, delete it, or add a fourth fact. The row is a plain `<ul>` and wraps on
its own. Keep the written date here in step with `data-open` on the leader —
this one does not depend on JavaScript, so it is what a visitor with scripting
off reads.

## Wiring the email form

The form is front-end only: submitting shows the success state and goes no
further. Point it at your provider by giving the `<form>` a real `action`
(Mailchimp, Buttondown, ConvertKit and Formspree all accept a plain HTML form
POST) and removing the `e.preventDefault()` line at the top of the submit
handler in `initForm`. Keep the handler itself: the morphing success state and
the screen-reader announcement both live there.

## Palette and type

Five colours and two faces run the whole page. In `:root`:

```css
--house: #1A0E11;      /* the dark auditorium, page base */
--screen: #EDE6D8;     /* the lit slide, and type on the dark */
--ink: #1A0E11;        /* primary type, on the slide only */
--ink-dim: #574549;    /* body copy, on the slide only */
--house-dim: #A99089;  /* secondary type, on the dark only */
--oxblood: #8E2233;    /* kicker, rule, button */
--bulb: #F0B44E;       /* the lamp — light only, never type */
```

Repaint those and keep the matching `--*-rgb` triples in step — the beam, dust,
grain, scrims and button shadow all resolve from the triples, so a swap that
misses them leaves the light the old colour. The faces are Oswald for display
and Cabin for UI; swap the two `--font-*` tokens and the Google Fonts link to
change them.

Two measured constraints to respect if you recolour, both explained at length in
the comment at the top of `style.css`:

- **`--bulb` is never a text colour.** It is the lamp. On the bone slide it
  measures 1.63:1.
- **`--ink` and `--ink-dim` belong on the slide; `--house-dim` belongs on the
  dark.** They are not interchangeable, and the two grounds are far enough apart
  that swapping them fails immediately.

## The beam, mechanically

The beam is a rotated rectangle, not a clipped wedge. That distinction is the
whole reason it reads as light: a `clip-path` polygon gives the shaft hard
geometric edges and a uniform cross-section, which looks like a smear of haze.
Instead, a vertical gradient supplies the soft falloff **across** the band, a
`mask-image` supplies the falloff **along** it (light fading with distance from
the lamp), and a CSS rotation sets the angle.

It sits inside an otherwise empty `.beam-pivot`. That wrapper exists so GSAP's
pointer lean writes its transform to a different element than the one carrying
the beam's own `rotate()` — otherwise the two fight, and the beam snaps flat the
first time the pointer moves. It also means the angle survives with JavaScript
off.

The chrome sits on scrims rather than on bare ground. `.top` and `.foot` each
carry a `--house` gradient at 0.94, so their text keeps its contrast wherever the
beam happens to land. Keep them if you move the beam: the beam is positioned in
percentages and the chrome is not, so routing the geometry around the chrome
holds at one width and quietly fails at others.

## The grain, mechanically

Noise is expensive to generate and cheap to move. The tile is generated **once**
into a 128px offscreen canvas, then drawn as a repeating pattern at a random
integer offset each frame — one fill per frame, rather than rebuilding a
full-screen buffer pixel by pixel. It runs at 24fps because that is what a film
gate runs at, and it composites in `overlay` against mid-grey noise, so it
textures the image without shifting any measured contrast pair.

It renders at device-pixel-ratio 1 deliberately. Grain should be the size of
grain, not the size of a pixel, and this is a quarter of the fill cost on a
retina screen.

## Deleting pieces

Every block is independent — the script checks for each piece and skips what it
doesn't find. Delete the form, the facts, the beam, the grain or the footer
freely; nothing else breaks.

## Accessibility

- **Without JavaScript the page is complete.** Every animation start state is
  set from JavaScript, and the beam is pure CSS, so the art direction survives
  with scripting off. The one thing JS gates is the leader's numerals: with
  scripting off it renders as an empty ring and crosshair rather than an
  invented or stale number, and the written date in the facts row carries the
  information instead.
- **With reduced motion**, the grain and dust are gone, the beam and house light
  are still, the leader keeps its ring, crosshair and a static numeral but loses
  its sweep, and the form works with an instant success state.
- **No flicker anywhere.** A strobing lamp was the obvious flourish here and it
  is deliberately absent: flicker is a photosensitivity risk, and the beam is
  eased over fourteen seconds instead.
- The beam, dust, grain, house light and leader are all `aria-hidden`
  decoration. The form announces its success politely to screen readers.
- Focus is visible on the input, button and links throughout.

## Browser Support

Modern evergreen browsers. The layout is flexbox and the beam is plain CSS, so
the page degrades gracefully; the canvas grain and dust simply do not appear if
canvas is unavailable. `mask-image` ships prefixed for older WebKit.

## Dependencies

- [GSAP core](https://gsap.com) (CDN) — that's all.

Explore the other examples: iOS Toggle Switch Coming Soon Template

A few useful details.

Prefer to work by hand?
The README has you covered.

Read the AI customisation guide

Do I need to download anything first?

You can copy the HTML, CSS and JavaScript straight from the product page with Copy for AI, then Copy full code, then paste it into your assistant. Copy setup prompt supplies the integration instructions, and Copy reference adds the README. Use Download ZIP when you need accompanying assets, all the pages of a template, or a complete UI kit.

Is there another library to install or maintain?

There is no GSAP Vault package to install or keep updated. You get editable source code that becomes part of your project. Products still use dependencies such as GSAP and, where needed, Three.js. The setup instructions explain what each product needs.

Where do I copy the setup instructions?

On a product you have access to, open Copy for AI and choose Copy setup prompt. Paste it into your coding assistant alongside the code from Copy full code, or use it with source files already in your project. The same instructions are included in the download as START-HERE-AI.md.

Which coding assistants can I use?

The brief is plain Markdown. Use it with an assistant that can read your project files, or paste it into your chat alongside the relevant source. There is no special plugin to install.

Can I use React, Next.js, Vue or Astro?

The source is vanilla HTML, CSS and JavaScript. Your assistant can adapt it to your framework, using the supplied brief to preserve behaviour and add the appropriate lifecycle cleanup. Review and test the integration in your project.

Do I need AI to use these products?

No. Follow the README and integrate the source yourself. The AI brief is an optional extra, and the finished code is yours to edit.

Start with the good part.
Make it yours with AI.

From product page to your project.

Copy the code.

Add the setup instructions.

Make it yours, then test.

Try it with a free product.

A few useful details.

Your cart