Deconstructed Launch Page

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

2. Add the section to your <body>. Put your page inside [data-dlp-page] and give each part a chapter number:

In your downloadThe working code for this step, in index.html.

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

In your downloadThe working code for this step, in index.html.

The script mounts every [data-dlp] section once the web fonts load (or after 600ms at most), pins it for the configured runway and releases it once the page is assembled. The opening burst then runs on a fixed clock: the button presses, a ring leaves it, the page detonates past its spots and settles, and the dashed slots draw in. A font that arrives late only triggers a re-measure.

The demo's faces (Instrument Serif and Instrument Sans, SIL Open Font License 1.1) are self-hosted in assets/fonts/ and preloaded in the <head>, so the headline is set in its own face before it splits; assets/fonts/OFL.txt holds the licence and copyright notices. Self-hosting or preloading your own display face matters here for the same reason: a late font swap reflows the page the visitor has just seen.

What the effect needs from your markup:

• A root [data-dlp] and, inside it, one [data-dlp-page]. The page element is the positioning context for the parts and the generated slots and shadows, and it is the layer the camera zooms.
• data-chapter="n" on each part, starting at 1. Parts in a chapter land together, staggered in document order. Mark the visual blocks a visitor would recognise (a card, a button, a photo, a heading), not every span. Aim for about 24 parts or fewer.
• Parts must not be nested inside other parts, and must not rely on a CSS transform for positioning: the script owns each part's transform. Position with insets, margins, flex or grid instead.
• data-dlp-split on a heading splits it into words (desktop only) that fly as separate parts in reading order. On phones the heading stays one part.
• data-dlp-origin on one element sets where the opening burst starts from. Without it, the last part bursts first.
• The caption bar is optional. [data-dlp-steps] > li gets is-active for the current chapter, [data-dlp-cue] before the first chapter, [data-dlp-done] when the page is assembled, and each [data-dlp-meter] > i gets a --fill value from 0 to 1. [data-dlp-reset] is shown when the page is assembled.

What is only the demo's styling: everything prefixed .lp- in style.css (the lamp brand page, its fonts, palette and photos), the construction grid on the ground, and the look of the caption bar. The mountDemoPage function at the end of script.js (finish swatches, quantity toggle, Add to bag) is demo behaviour too; delete it with the demo page.

CSS the effect depends on (marked REQUIRED in style.css):

• The root is one viewport tall with overflow: hidden, so the cloud never causes page scroll.
• [data-dlp-page] is position: relative with isolation: isolate, so floating parts can stack above one another by depth.
• :where(.dlp [data-chapter]) gives parts position: relative and a z-index above the generated .dlp__slot and .dlp__shadow layers. It has zero specificity, so your own position: absolute still wins.
• .dlp.is-live .dlp__page drops the page background while the effect runs; the generated .dlp__fill fades the paper back in as chapter 1 lands. If you change the page colour, change .dlp__fill to match.
• .dlp__flash is the ring that leaves the burst origin, and .dlp.is-celebrating is set for about a second when the last part lands (the demo uses it for a sheet lift, a shine across the button and a meter sweep). Restyle or drop both freely.

Set these on the [data-dlp] root.

• Real content throughout. The page is ordinary HTML in its real reading order. Parts only ever move with transforms, so screen readers, search engines and find-in-page get the assembled content at every scroll position. Split headings keep an accessible label from SplitText.
• Reduced motion. With prefers-reduced-motion: reduce there is no pin, no explosion and no caption bar: the finished page is shown immediately and every control works. Switching the preference while the page is open rebuilds the effect in place.
• Keyboard. All controls are native buttons and links with visible focus. Tabbing to a floating part calls it home, and keyboard activation always goes through, even while the part is still flying in. A floating part ignores pointer clicks until it is home, so a stray click during the show cannot add to the bag. After Pull it apart, focus moves to the section so keyboard users stay in place.
• Touch. Phones get a flatter explosion with whole headings as single parts, no dragging (touch scrolls the page as normal) and the same chapter captions.
• No JavaScript. Without the script, or if a required CDN file fails, the page is simply shown assembled.

Required:

• GSAP 3.13+ (the demo is built against 3.15.0; SplitText.create and the public SplitText and InertiaPlugin builds need 3.13)
• ScrollTrigger

Optional, each feature switches off cleanly without its plugin:

• SplitText (headline words as separate parts)
• Draggable and InertiaPlugin (grab and throw)
• Flip (the demo page's swatch ring and quantity toggle)
• Lenis 1.3+ (smooth scrolling)

Demo assets: the Mira lamp photographs in assets/img/ are generated concept imagery of a fictional product, made for this demo. Replace them with your own product photography.