About this component

A card themed around a sunlit stone surface with a central gnomon (sundial fin). Content is displayed as shadows cast by the gnomon changing angle and length based on the time of day. Hover acts as a cloud diffusing the light and making shadow text softer and easier to read. Clicking advances through different times of day revealing different mood and information sets like day and night modes with stars moon and shifting temperatures.

Difficulty

Advanced

Style

Sundial / Celestial

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/sundial-shadow-card.