About this component

The card's content is projected from a single bright point at the base, expanding upward into a cone of light. Hovering changes the angle of projection, distorting the content like anamorphic art. Clicking captures a slice of the light cone, flattening it into a readable 2D panel. The projection color shifts based on the wavelength of the content type.

Difficulty

Advanced

Style

Hologram

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/light-cone-projection-card.