Parallel: Motion studio template
Movement is the message.
For motion and 3D studios: a scroll-lit statement hero, a masonry reel, services on hover, a logo wall, studio values and a giant marquee with a wordmark footer.
About the Parallel template
Parallel is for motion and 3D studios. A statement that lights up word by word on scroll, a masonry reel, services on hover, a logo wall, studio rules and a giant marquee CTA keep the page moving.
Movement is the message. It is a complete motion studio landing page for React and Tailwind CSS 4, assembled from 8 Charcoal UI sections.
Who Parallel is for
- Motion design and animation studios.
- 3D and CGI studios.
- Live visuals and event studios.
- UI motion specialists.
What is inside
8 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Statement: A single statement that lights up word by word as you scroll, with a spinning scroll badge.
- Gallery Masonry: Photo gallery with tag filters over a masonry grid and a dialog for the full-size image.
- Features Hover List: Services as a big type list; hovering a row floats a photo beside the cursor.
- Logo Wall: Grid of customer wordmarks; hovering a cell slides the logo away to reveal that customer's result.
- Team Values: Company values as huge numbered rows that open to show what each one means in practice.
- CTA Marquee: Giant scroll-reactive marquee type with a round let's-talk button on top, for studios.
- Footer Wordmark: An enormous wordmark that rises into view, under a short row of links.
How it is built
Every gallery image and service is a prop. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Parallel
npx shadcn@latest add @charcoal/parallelTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Parallel for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Parallel a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Statement: A single statement that lights up word by word as you scroll, with a spinning scroll badge.
- Gallery Masonry: Photo gallery with tag filters over a masonry grid and a dialog for the full-size image.
- Features Hover List: Services as a big type list; hovering a row floats a photo beside the cursor.
- Logo Wall: Grid of customer wordmarks; hovering a cell slides the logo away to reveal that customer's result.
- Team Values: Company values as huge numbered rows that open to show what each one means in practice.
- CTA Marquee: Giant scroll-reactive marquee type with a round let's-talk button on top, for studios.
- Footer Wordmark: An enormous wordmark that rises into view, under a short row of links.