A motion-first portfolio with accessibility built in
Kinetic Studio is a premium Astro theme for creative teams that want scroll-linked animation as a first-class design element — not an afterthought. Orbital dot systems, kinetic lines, and scaling project panels create a cinematic feel while the underlying site stays static and fast.
The visual system uses deep graphite and carbon backgrounds with lime, orange, and soft-white accents. The result is athletic, high-contrast, and distinct from generic dark portfolio templates.
What is included
Kinetic Studio includes home, work index, case-study detail pages, services, about, process, contact, journal index and detail, styleguide, RSS, and a custom 404 page.
Case studies are MDX files in src/content/caseStudies/. Journal posts live in src/content/journal/. Testimonials are stored in a JSON content collection. The styleguide helps buyers understand the design system after purchase.
Scroll animation with a mobile fallback
Motion powers scroll-linked transforms with hardware-accelerated will-change management. On viewports below 768px, floating motion layers are hidden and the layout switches to clean vertical sections — so mobile visitors never fight pinned scroll containers.
Reduced-motion preferences are respected across animation layers.
Built on a static-first Astro stack
Kinetic Studio is built with Astro 6.4.4, Tailwind CSS v3, TypeScript, MDX content collections, Motion 11, and Sharp for image optimization. The theme compiles to static output with no required CMS or backend.
If you encounter peer dependency warnings during install, use npm install --legacy-peer-deps as documented in the theme README.
Customization workflow
Replace demo case studies, journal posts, testimonials, services, and process copy with real buyer content. Images go through Astro’s image pipeline during build. The styleguide documents typography, color tokens, and motion intensity references for consistent rebranding.
