Captions AI

Captions | Your AI-powered creative studio is a recreation of the Captions.ai marketing landing page. The focus is on motion design (GSAP, Lottie), smooth scrolling, and a more performant, accessible implementation than the reference site.

Main features

• 🎬 Marketing landing clone — Faithful structure and feel of the original product landing, implemented as a standalone static site
• ✨ GSAP + ScrollTrigger — Scroll-driven animation choreography and section reveals
• 🎞️ Lottie — Vector-based motion graphics integrated into the page narrative
• 📐 Responsive typography (RFS) — Automated fluid scaling for headings and body copy across breakpoints
• 🖱️ Lenis — Smooth scrolling that pairs cleanly with scroll-linked animation
• 🎨 SASS + Gerillass — Organized styling with mixins and a maintainable stylesheet architecture
• ⚡ PostCSS — postcss-preset-env, postcss-inline-svg, and a modern CSS pipeline
• ♿ Accessibility & performance — Tuned for usability and speed relative to the original experience (see Lighthouse summary below and the original-site capture for context)

This build targets stronger performance and accessibility than the official Captions.ai marketing site, with a Lighthouse capture of the original for context (screenshot on Imgur).

Original site (reference)

Open full-size on Imgur

This clone (desktop)

Desktop Lighthouse summary for the clone, recreated from the archived private-project screenshot and self-hosted so it works with a strict Content Security Policy:

• HTML5 — Semantic structure for the landing sections and content flow
• SASS — Component-oriented styles, variables, and layout helpers
• JavaScript — Orchestration for animation libraries and scroll behavior
• GSAP + ScrollTrigger — Timeline-based and scroll-scrubbed motion
• Lottie — JSON-driven animations embedded in the page
• Lenis — Inertial / smooth scroll layer
• RFS — Responsive font scaling without manual breakpoint hacks
• Gerillass — SASS mixins library for faster styling workflows
• PostCSS — Preset-env and inline-SVG tooling for compatible, optimized CSS

• Rebuilt the landing as a static front-end optimized for performance and accessibility compared to the original reference
• Coordinated GSAP timelines with Lenis so scroll-linked effects stay stable across devices
• Used Lottie where vector animation delivers clearer motion than CSS-only approaches
• Applied RFS so typography scales fluidly from mobile to desktop without cluttering media queries
• Documented quality with a self-hosted Lighthouse desktop summary based on the archived project screenshot, and compared the build against the original marketing site using a published Lighthouse capture