A cinematic portfolio built for case-study storytelling
Solara is a premium Astro theme for designers and creative directors who want scroll-linked motion, atmospheric depth, and structured case-study pages — not a flat project grid. Clay and ink scroll section dividers, ambient orbs, floating particles, and a custom cursor create a premium dark-leaning aesthetic.
Solara is one of the most motion-forward portfolio themes in the collection, while the underlying output remains static and deployable anywhere.
What is included
Solara includes home, work index and detail, journal index and detail, about, services, process, resume, contact, styleguide, RSS, and a custom 404 page.
Projects are MDX files in src/content/projects/. Journal posts live in src/content/posts/. Testimonials are JSON data. Resume content is structured in src/data/resume.ts and experience.ts.
Scroll-linked motion and WebGL atmosphere
The homepage uses ScrollZoomHero, PinnedHorizontalProjectRail, StickyProjectShowcase, ImageHandoffTransition, and CaseStudyZoomPreview components. Lenis handles smooth scroll. An optional WebGLHero powered by Three.js adds atmospheric depth to the hero.
Magnetic buttons, ambient orbs, and floating particles reinforce the cinematic feel. A project filter bar on the work index helps visitors browse by category.
Built on a static-first Astro stack
Solara is built with Astro 6.4, TypeScript, Tailwind CSS v3, MDX, Motion, Lenis, Three.js, Sharp, @tailwindcss/typography, sitemap, and RSS. A generate:images script supports the asset pipeline.
There is no required CMS, database, or backend. Node >= 22.12.0 is recommended.
Customization workflow
Replace demo projects, journal posts, testimonials, resume entries, and process copy with real buyer content. Swap or remove the WebGL hero if your brand prefers a lighter first paint. Run the image generation script when adding new portfolio assets.



