Kouko — Perheen pakkaamaa siementä 🌱

A modern, animation-driven marketing site for Kouko, a fictional family-run Finnish seed packing company from Northern Ostrobothnia. Built as a single-page experience with GSAP-powered scroll storytelling.

Highlights

• Signature scroll scene — a pinned GSAP ScrollTrigger sequence in the Pakkaamo section where 600 kg big-bags stack from a single sack into a full 12-bag pallet shipment, mirroring the brand's packaging sheet.
• Living hero — layered parallax hills, drifting clouds, and a lightweight canvas particle system of floating seeds.
• Brand-derived design system — pine green, linen, sky blue and the blue bag-handle accent pulled straight from the packaging artwork; type set in Bricolage Grotesque / Schibsted Grotesk / Spline Sans Mono.
• Finnish-first content — categories (kotieläin, kasvinviljely, riista, mehiläiset, viherympäristö), seed mixes with kylvömäärä data and agronomic attribute bars, a family timeline, and a quote-request form.
• Quality floor — responsive to small phones, keyboard-visible focus states, prefers-reduced-motion fully respected (all content readable with JS disabled), semantic HTML with skip link.

Stack

• HTML + CSS + vanilla JS (no build step)
• GSAP 3 + ScrollTrigger via CDN
• Google Fonts

Run locally

# any static server works
python3 -m http.server 8000
# then open http://localhost:8000

Or just open index.html in a browser (fonts/GSAP load from CDNs, so you need to be online).

Structure

index.html        # single-page site
css/style.css     # design system + responsive + reduced-motion
js/main.js        # GSAP timelines, scroll scenes, particles, nav, form
assets/brand/     # brand reference images

License

Demo/portfolio project. Brand artwork © its creator.