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
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.
Ghost
strongMarketing Platform
The reference for a creator-platform brand at peak typographic confidence - Inter Display at 96px, real product dashboard at full fidelity, single saturated green accent on a 4-surface palette.
Pitch
flagshipSaas Product
a violet-and-yellow presentation-tool flagship that pairs Eina01 + Mark Pro on a warm-navy ink, sparkle keyframes (`sparkL`, `sparkM`, `sparkS`, `sparkHover`), animated cursor pointers, and a numbered four-step "Plan / Build / Pitch / Measure" walkthrough - the canonical reference for "B2B presentation software that earns playfulness."