Product Launch Template

Quick Start

1. Use the folder as your site root. index.html is the complete page. Open it locally or drop the folder on any static host (Netlify, Vercel, GitHub Pages, a plain server).

2. Replace the placeholder content in index.html:

• Brand name: search for JUNO and Juno (nav, cans, footer)
• Hero headline, sub, and meta chips
• The four "Why" cards
• The three flavour panels and their matching cans
• Stockist wordmarks, buy section copy, and footer links

3. Recolour the brand in assets/style.css. All colours live in the :root token block:

Code snippet omitted: it ships with the download.

Flavour panels also carry their colour in the markup for the scroll retint. Keep data-flavour-color in sync with the CSS when you change a flavour:

Code snippet omitted: it ships with the download.

data-flavour-word is the giant word shown behind the can while that flavour is active.

4. Keep the script tags at the bottom of index.html (GSAP core, ScrollTrigger, Lenis, assets/script.js). Lenis is optional; delete its script tag and the Lenis block at the top of assets/script.js for native scrolling.

5. Optional: minify before you go live. assets/script.js is the readable source and is what index.html loads. It is around 12KB, which is fine to ship as-is. If you would rather serve it minified, produce it yourself once your edits are done:

Code snippet omitted: it ships with the download.

Then point the last <script> tag in index.html at assets/script.min.js. Keep script.js as the file you edit and re-run the command after each change.

Section Guide

Every section is independent. Delete any <section> you don't need and the script skips it automatically.

Hero

• The headline words are <span class="hw"> elements; each pops in separately. Give any word the sticker treatment with class="hw hw--chip".
• The fizz bubbles are generated into .hero-fizz; adjust the count in initFizz() (default 14) or delete the div to remove them.
• The badge text lives on a curved SVG path. Edit the <textPath> content; keep it around 38 characters so it fills the circle.

Ticker

• Edit the .tick-item phrases. The two .ticker-group spans must stay identical for a seamless loop, and each group should be wider than the widest screen you care about (six phrases is plenty).
• data-ticker-speed is pixels per second (default 80).

Why cards

• Add or remove .why-card articles freely; the grid reflows. Each card's tilt comes from the nth-child rules in the CSS.
• Cards squish on hover via GSAP; on touch devices they are static.

Flavour switcher (signature)

Desktop with motion allowed gets the enhanced layout: the can column is position: sticky while ScrollTriggers on each panel retint the section and swap the can. Small screens, no-JS, and reduced motion all get the same markup as stacked flavour cards, so nothing is ever hidden or unreachable.

To add a fourth flavour:

1. Duplicate a .flavour-panel (with its .panel-can) and a matching .stage-can. They are matched by order, so keep both lists in the same sequence.
2. Add a can--yourflavour class setting --flav and a panel--yourflavour background in the CSS.
3. Set the panel's data-flavour-color and data-flavour-word.

Stockists

Each stockist is a styled text wordmark with its own type treatment. Replace them with your own stockists, or with real logos as <img> tags if you have permission to use them.

Buy

The can trio mirrors the flavours. The buttons are plain anchors; point them at your shop, Shopify checkout, or wholesale form.

The CSS cans

The product cans are drawn entirely in CSS, sized by one variable so they scale anywhere:

Code snippet omitted: it ships with the download.

• Sizes: can--lg (240px), can--sm (140px), can--mini (108px), or set --can-w directly.
• Flavour classes (can--yuzu, can--cherry, can--cuke) only set the --flav band colour.
• If your product isn't canned, replace .can markup with your own product shot; every animation targets the wrapper (data-hero-can, data-stage-can, data-buy-can), not the can internals.

Options

Attribute	Element	Values	Default	Description
data-pop	any	presence	off	Rise-and-fade reveal when scrolled into view
data-pop-delay	[data-pop]	seconds	0	Stagger delay for grouped reveals
data-sticker	any	presence	off	Elastic pop-in reveal plus squish hover
data-ticker-speed	.ticker	px per second	80	Ticker scroll speed
data-flavour-color	.flavour-panel	hex colour	#F2AE1C	Section ground colour while this flavour is active
data-flavour-word	.flavour-panel	text	empty	Giant background word behind the can
data-hero-can / data-stage-can / data-buy-can	can wrappers	presence	off	Marks cans for the hero rise, flavour swap, and buy trio

Accessibility

• Reduced motion: both the CSS media query and a gsap.matchMedia branch serve a complete static page; the flavour section stays as stacked cards.
• No JavaScript: the markup is a plain, fully readable document; every animation is an enhancement on top.
• Keyboard: focus mirrors hover on the sticker cards, and all interactive elements are real links with visible focus outlines (cream on dark grounds).
• Screen readers: decorative pieces (fizz, badge, ticker, duplicate cans) are aria-hidden.

Dependencies

• GSAP 3 core + ScrollTrigger (CDN)
• Lenis smooth scroll (CDN, optional)
• Google Fonts: Unbounded, Figtree, DM Mono

Browser Support

All modern browsers. The layout uses CSS grid, aspect-ratio, individual rotate properties, and position: sticky, so it needs a browser from roughly 2022 onwards.