About this component

Two or three differently colored clays folded and swirled together in a unique pattern per instance. The marbled pattern is unique to each card. Hovering slowly blends the colors together at the cursor point. Clicking cuts the card with a wire, revealing a clean cross-section with a new, sharp pattern. Colors never fully mix, preserving the marbled identity.

Difficulty

Intermediate

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/marbled-clay-card.