Gsap
gsap.coma near-black product site where a 101px "Animate anything" headline in the bespoke Mori sans on creamy off-white (#fffce1) and 3D liquid-form objects animated by GSAP itself make the homepage the most credible product demonstration in the JavaScript-animation category.
Design tokens
- display
- Mori, sans-serif
- body
- Mori, sans-serif
- fallback
- Times
Do / Don't
Reference it for
- The "use your own product on your homepage" discipline — every animation on the GSAP site is GSAP. If the client's product is a tool, the homepage should be the most convincing live demo of that tool.
- A massive headline (101px) carrying the entire brand position — when the product is the verb (animate), the page can just say the verb at scale.
- Creamy off-white text (#fffce1) on near-black with a green tint (#0e100f) — softer than pure white-on-black, less clinical than the Liveblocks pure-black palette.
- Decorative oversize curly braces wrapping the tag-line — a typographic flourish that signals "this is a developer tool" without using a code block.
- A short page (6 main sections) — Animate Anything → Why GSAP® → Tools → Brands using GSAP → Showcase. The product carousel doesn't need feature blocks, just demonstrations.
- A promo banner above the nav in saturated brand-green (#0ae448) — high contrast against the near-black, used for major announcements ("GSAP is now free for everyone").
- 3D liquid forms as the only imagery — abstract gradient blobs that animate on hover/scroll. The opposite of stock product screenshots.
- A zero-keyframes, zero-AOS, ten-CSS-transitions minimal CSS footprint with everything else handled in GSAP — the site IS the demo.
Do not copy
- Mori — the bespoke sans is licensed and Mori Foundry's, not portable. Substitute with a humanist sans (Inter Display, Söhne Buch, Mona Sans).
- The exact #0e100f green-tinted near-black with #fffce1 cream off-white — strongly GSAP-coded.
- The "Animate Anything" headline pattern at 101px — only works for products that ARE the verb. On a SaaS product with multiple capabilities, this hero will read as vague.
- Loading GSAP for a non-animation-heavy client. GSAP is ~50KB gzip and the smart-money replacement for most use cases is CSS keyframes + IntersectionObserver. Borrow the *aesthetic* of GSAP's site, not the library.
- The 3D liquid-form imagery — bespoke; commission new abstract objects for each client.
- The fractional pixel sizes (15.38px, 17.38px, etc.) without GSAP doing the scrub. On a static page these are arbitrary.
Signature moves
product-is-the-demo homepage
every animation on the page is built with the product itself, making the homepage the most convincing live demo, supported by a short 6-section page of demonstrations not feature blocks.
verb-at-scale mega headline on creamy dark
a massive ~101px headline naming the product's core verb sits in creamy off-white (#fffce1) on green-tinted near-black (#0e100f), wrapped in decorative oversize curly braces.
rare-green announcement banner
a promo banner above the nav in a saturated brand-green (#0ae448) lands hard because the rest of the page is near-black, used for major announcements.
Related references
Catbird
nicheRetail
a Brooklyn fine-jewellery boutique with an editorial fashion-magazine voice, a Denton Condensed display serif over a TT Fors sans, warm cream and charcoal fields, a cinematic campaign hero and a scrolling "SOLID GOLD ALWAYS" ticker.
Cubitts
nicheHealth
a London bespoke-spectacle maker treating its Shopify storefront like a design museum, near-black ink on white, a tiny precise type scale in its own Fold Grotesque, generous 16px-radius media tiles, and a giant "CUBITTS" wordmark laid behind a Greenwich Observatory photograph.
Figma
flagshipSaas Product
a white-canvas product site that uses tilted Figma file-cards as the hero imagery, the bespoke variable figmaSans + figmaMono pair at non-integer weights (340, 480, 520, 540), and a 0.16s ease-out motion contract to demonstrate breadth without showing a single screenshot of the actual Figma UI.
Form Nutrition
strongFitness
a UK supplements DTC that pairs a warm off-white editorial base with a single mustard-yellow accent and a terracotta brand block, a geometric-sans-plus-Silka heading system, big oversized logo graphics and a calm, recipe-and-ritual voice.