Product showcase: Template With Motion

Template · Vanilla JS + WebGL + CSS 3DUpdated November 5, 2026

HeroTemplateVanilla JS + WebGL + CSS 3D

Prompt for your AI assistant

Paste this into Claude, Cursor or ChatGPT. It carries your headline and palette choice.

Build a "Product showcase" first screen for my site, composed from these Enrichr Library elements:
- bg: Shader gradient background (https://enrichr.dev/elements/shader-gradient-background.html)
- hero: Depth parallax card (https://enrichr.dev/elements/depth-parallax-card.html)
- body: 3D ring carousel (https://enrichr.dev/elements/ring-carousel.html)

Read each element's spec and source at https://enrichr.dev/elements/<name>.json and the template at https://enrichr.dev/templates/product-3d-showcase.json.
Requirements: vanilla JavaScript and CSS, no new dependencies; respect prefers-reduced-motion; keep the text real HTML; work on touch screens. Then build the rest of the page below it in the same style.

Settings:
- headline: Aura One
- palette: forest

Verify: reduced motion shows no movement, it works at 375px wide, there are no console errors, and the headline is readable over the background.

The template as JSON: /templates/product-3d-showcase.json.

Built from these elements

Shader gradient backgroundA slow, flowing noise gradient drawn with one WebGL fragment shader, with a CSS fallback. Depth parallax cardLayered shapes shift by different amounts as the pointer moves, drifting on touch screens. 3D ring carouselCards on a CSS 3D ring that rotates one step at a time, with buttons, arrow keys and autoplay.

What it is for

Replace the shapes with your product cutouts for real depth.

Section	Full first screen
Techniques	Parallax and depth, CSS 3D, WebGL
Stack	Vanilla JS, WebGL, CSS 3D
Mood	modern, soft
Status	Preview

Every element in this template respects prefers-reduced-motion and keeps its text as real HTML. Motion pauses when it is off screen. Check contrast after you change the palette, especially for text over the background.

Find this technique on a real site

Want to see this technique in the wild? Check any site with the free tools, then build your own version from this page.

Check which animation library a site uses · Extract a site's design tokens · Browse site breakdowns

Licence and provenance

Free to use in personal and client projects during the preview. Final licence terms will be published here before any paid tier starts; ask before reselling the code as a collection.

SaaS motion landingA product landing opener with a flowing shader backdrop, a rising headline and a scroll-read manifesto. Automotive showcaseA dark, cinematic opener: a scroll-driven 3D mountain flyover, a rotating card ring, a headline band and a read-along statement. Creative one-pagerA playful single-screen intro: popping title, floating depth shapes and a fast ticker.

FAQ

Where do I put product photos?

In the depth layers and ring cards. Use transparent PNG or WebP cutouts for the layers.

Is it heavy?

No images ship by default; both effects pause off screen.