Canvas — Creative Studio

Canvas is for studios whose site has to be the portfolio piece. WebGL image transitions, a cursor-reactive gallery, horizontal scroll case studies — with a reduced-motion path that degrades to something still beautiful.

What makes it different

• 3D hero scene — A lightweight Three.js scene that lazy-loads after first paint and falls back to a static gradient on low-end devices.
• Motion that respects users — Scroll-linked reveals and page transitions built with Motion, all disabled automatically under reduced-motion.
• CMS-ready content layer — Content reads through a single adapter, so swapping MDX for Sanity, Payload or your own API touches one file.
• Token-based theming — Every colour, radius and shadow is a CSS variable. Rebrand the whole product by editing one file.
• Every breakpoint designed — Not just fluid — mobile, tablet and desktop each get a layout that was actually laid out on purpose.
• Accessible components — Keyboard navigation, focus rings, ARIA labels and WCAG AA contrast verified on every interactive element.

Who it's for

Motion designers, photographers and creative studios competing on visual impression.

Built with

Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Three.js · Motion · GLSL

In the download

• Full Next.js source code (TypeScript)
• Figma design file
• Tailwind CSS design tokens
• Written documentation
• One-click deploy config

Updates and support

Framework upgrades and bug fixes are free for as long as this product exists. Support is included for 6 months with a Regular license and 12 months with an Extended one, and can be extended at any time.