Motion — Creative Studio

Who is this template for?

General Features

Ultra-fast Performance: Built with Astro (static-first with React islands) for blazing-fast load times.
Light & Dark Theme: Dark by default, with a complete light palette via design tokens and a persisted preference — no flash on load.
Data-driven Reusable Components: All UI components are powered by centralized data json configs — swap copy, update services, and scale your portfolio without touching component code.
Fully Responsive: Mobile-first layouts that look perfect across mobile, tablet, and desktop.
Cinematic Motion: GSAP entrance and scroll-reveal animations wired to Lenis smooth scrolling, with graceful fallbacks so content always appears.
Media-aware Project System: Point one field at an image, or a Vimeo / YouTube URL and the right player renders automatically — videos lazy-load and autoplay only when scrolled into view.
Asymmetric, Filterable Work Grid: Feature / split / half card layouts with category filtering and a shared case-study engine for projects and stories.
SEO Optimized: Everything in place — auto-generated sitemap, metadata, canonical URL, and Open Graph / Twitter Card tags from a single component.
Validated Contact Form: Zod-validated, spam-resistant form ready to connect to your email provider (e.g. Resend).

Technology Overview

Included Pages & Sections

Work (Home): Animated display hero + asymmetric, filterable project grid.
Project Detail: Editorial case study — challenge, approach, results, gallery, and related work — via dynamic routes.
Stories: Journal / recent-stories index with switchable list and grid views.
Story Detail: Long-form story case study sharing the same layout engine as projects.
Contact: Production-ready, Zod-validated form with an FAQ accordion and contact details.
Utility: Custom 404 page and a prerendered

Additional Highlights

Centralized Content System: Manage all copy, projects, stories, and metadata through JSON config files in — no need to touch components.
Reliable on Any Device: Reveal animations degrade gracefully — content always shows, even on slow connections or iOS Low Power Mode.
Protected Media: Download/right-click-guarded media with automatic video, GIF, and image detection.
Comprehensive Documentation: Detailed README covering structure, theming, animations, and configuration.

License & Usage

By purchasing Motion — Creative Studio, you are granted the right to:

Note: Redistribution, resale, or sublicensing of the template in its original or modified form is strictly prohibited.