About this component

A matte black surface like a temperature-sensitive mug that appears completely blank at rest. Hover warms the area beneath the cursor, revealing hidden colors and text that fade back to black on cooling. A vigorous click heats the entire card, making all content blaze into visibility for a brief moment before cooling.

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/thermochromic-ink-card.