Building Block

JS Animations

Scroll-triggered reveals, CSS border glow on entry, and GPU-accelerated transitions — ready to deploy in any Claude CMS page with a single prompt.

Alternating feature rows

Three image/text rows with a gradient border that grows in as each one enters the viewport.

Get the code
Lightbox modal carousel

3-card carousel with two-phase rotation, keyboard nav, and an accent border that grows in on the centre card.

Get the code
Sticky tabs + sliding panels

Sticky feature tabs that follow scroll position, paired with panels that fade and slide into view.

Get the code

Code Patterns

Drop-in animation building blocks

Each pattern below is self-contained. Give Claude the prompt and it deploys the CSS to theme.css and JS to index.php — no manual code editing.

Scroll Reveal — IntersectionObserver

Adds .is-visible to elements as they enter the viewport. Unobserves after first trigger for performance.

Vanilla JS No Dependencies Reduced Motion Safe
  • IntersectionObserver with 10% bottom offset
  • Falls back to instant-visible on unsupported browsers
  • CSS opacity + transform transition on .is-visible
Prompt

Add scroll reveal to .rm-card and .rm-section elements. Use IntersectionObserver. CSS to theme.css, JS to index.php.

Border Glow — CSS @property Animation

Animates a transparent-to-accent gradient border on scroll entry. Requires @property registration so CSS can interpolate the custom property.

CSS @property Gradient Border No JS Loop
  • @property --green-alpha with syntax: '<number>'
  • Animated via @keyframes triggered by .is-visible
  • Reduced-motion: skips animation, shows full border immediately
Prompt

Add a glowing orange border animation to .feature__media that triggers on scroll entry. Use CSS @property. CSS goes in theme.css.

Alternating Feature Layout with Video

50/50 grid that flips image and text sides alternately. Collapses to single column on mobile, text always above media. Active video auto-plays on scroll-in, pauses on scroll-out.

CSS Grid Responsive Self-Hosted Video Scroll-Triggered Playback
  • 50/50 grid: grid-template-columns: 1fr 1fr
  • .feature--text-left / .feature--text-right modifiers
  • Square media container with aspect-ratio: 1/1
  • Native <video> with muted loop playsinline for autoplay
  • IntersectionObserver plays only the active tab's video when in view
Prompt

Create 3 alternating feature sections with self-hosted MP4 video embeds using the .feature classes from theme.css. Use <video> tags pointing at claudecms.com/videos/ and VIDEO_NAME placeholders. Add IntersectionObserver to auto-play the active tab's video when scrolled into view.