skills.rest
ccediland
ccedilandCOMMUNITY
Explore all skills by this author →
GitHub

signature-anim

Integrates an interactive Rive state-machine animation into Astro sites under CSP and performance budgets.

Updated Jun 17, 2026
Search Tags:#accessibility#animation#csp#webassembly#astro#state machine#rive
One-click install
npx skills add https://github.com/ccediland/web-stack-skills --skill signature-anim-ccediland
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: signature-anim
Source: https://github.com/ccediland/web-stack-skills/tree/main/plugin/skills/signature-anim
Command: npx skills add https://github.com/ccediland/web-stack-skills --skill signature-anim-ccediland

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @rive-app/canvas, and includes references (resource) components.

What problem does it solve? Embedding a designer-authored interactive Rive animation on a production site typically breaks the Content Security Policy, blows the performance budget with a heavy WASM runtime, or fails accessibility requirements. This Skill provides the vetted integration recipe for adding one signature Rive moment to an Astro 7 plus Cloudflare Workers site without those failures. ## Core Features & Use Cases - CSP and WASM recipe: Configures Astro 7 native CSP with 'wasm-unsafe-eval' and self-hosted WASM so the Rive runtime runs under a hash-based policy with same-origin fetches. - Lazy runtime loading: Keeps the roughly 840 KB gzip runtime off the critical path using IntersectionObserver and dynamic imports, with a reserved canvas box to prevent layout shift. - Accessibility and fallback: Implements reduced-motion handling, a WCAG 2.2.2 pause control decision tree, and a static poster fallback for runtime failure. - Use Case: A designer delivers a .riv file with hover and scroll-driven branching states for a hero section; use this Skill to wire state-machine inputs, pick the right renderer (@rive-app/canvas vs webgl2), and ship it without breaking Lighthouse budgets. ## Quick Start Use the signature-anim skill to embed my hero.riv file as a lazy-loaded interactive animation on my Astro site with CSP and reduced-motion support.

Frequently Asked Questions about signature-anim

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed a Rive animation in an Astro site?▼

Install @rive-app/canvas, self-host the WASM with a ?url import and RuntimeLoader.setWasmUrl, then lazy-init the Rive instance with an IntersectionObserver and dynamic import. Supply stateMachines at construction so the state machine runs instead of the first linear animation.

Rive vs Lottie vs dotLottie for web animation?▼

Rive suits one signature moment with branching state-machine logic, data binding, and scripting-grade control. dotLottie v2 state machines cover modest hover or click interactivity at zero cost, while playback-only animation should use plain Lottie or CSS since neither runtime is lightweight.

Why is my Rive animation blocked by Content Security Policy?▼

WebAssembly compilation is blocked when script-src or default-src lacks 'wasm-unsafe-eval'. Add it to scriptDirective.resources in Astro's security.csp config, keep connect-src 'self', and self-host the WASM so no CDN origin is needed.

Which Rive runtime package should I use: canvas, canvas-lite, or webgl2?▼

Default to @rive-app/canvas since Canvas2D has no WebGL context limit. Use canvas-lite when the .riv needs no Rive Text, audio, or scripting to roughly halve the WASM. Reserve webgl2 for the Rive Renderer or heavy mesh deformation, and never use the legacy webgl package.

Does Rive support prefers-reduced-motion accessibility?▼

No, Rive ships no built-in motion accessibility. You must read the prefers-reduced-motion media query at runtime, start paused or load a reduced artboard, and add a keyboard-operable pause button if the animation autoplays or loops beyond five seconds per WCAG 2.2.2.

How do I drive a Rive state machine from scroll position?▼

Write a Number input from a passive scroll listener throttled with requestAnimationFrame, setting progress as scrollY divided by scrollable height. No animation library is needed; the state machine interpolates through its blend states once the input value changes.

Related Skills

Explore More Software Engineering Skills→
petbrainspetbrains
13

frontend-rive

Orchestrate Rive state machine animations in React with useStateMachineInput.

Official
Intermediate
rodrigotoledorodrigotoledo

perf-lighthouse

Run Lighthouse audits via CLI or Node API and parse JSON reports.

Community
Advanced
VKirillVKirill
15

web-animation-router

Route web animation tasks to CSS-native, Motion, GSAP, AutoAnimate, Rive, or dotLottie strategies.

Community
Advanced
andrey-belenandrey-belen

frontend-lottie

Integrate Lottie animations into React/Next.js projects using @lottiefiles/dotlottie-react.

Community
Intermediate