About this component

A card that cycles through a short, jerky stop-motion animation where each frame is a slightly different clay sculpt of the same subject. Hover pauses the animation and lets the user scrub through frames. Clicking leaves a thumbprint on the current frame, bookmarking it. The charming imperfection of fingerprints and smudges is celebrated throughout.

Difficulty

Advanced

Style

Claymorphism

Frameworks

HTML/CSS, Tailwind, React, Vue, Angular, Svelte, LWC

Embed this component

Paste this snippet into any site — the design renders in a sandboxed iframe served from /embed/claymation-frame-card.