Refractive Topology Prism Card
Description: A content container that simulates a thick block of high-index glass. It doesn't just blur the background; it bends light based on the viewing angle and the simulated thickness of the card.
Concept: Snell’s Law of Refraction (
n1sinθ1=n2sinθ2n1sinθ1=n2sinθ2) and Chromatic Aberration.
The UI treats the card as a 3D dielectric material. As the user scrolls or moves the mouse, the background image behind the card distorts and separates into RGB channels (spectral dispersion), simulating real light passing through a prism.Features:
Dynamic Dispersion: Edges of the card split light into red, green, and blue fringes based on the angle of incidence.
Fresnel Reflection: The surface becomes more reflective at glancing angles.
Caustics: If placed over a light background, it casts simulated light concentrations (shadows and highlights) on the "floor" of the UI.
Uses:
High-tier product displays (watches, jewelry).
Hero sections on landing pages.
Profile cards in immersive 3D environments.
Benefits:
Creates a sense of tangible value and "weight."
Provides hierarchy without using solid colors or heavy drop shadows.
The mathematical precision of the refraction feels subconsciously "correct" to the human eye.