Crystal

Diamond-like crystal lens with faceted refraction.

Props

Prop	Type	Default	Description
origin	origin	center	Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
center	position	{"x":0.5,"y":0.5}	Center position of the crystal shape
scale	range	1	Scale of the crystal shape (1 = default size)
rotation	range	0	Rotation of the crystal shape in degrees
cutout	checkbox	false	Cut out alpha outside the crystal shape
refraction	range	0.5	How strongly the crystal refracts content beneath
dispersion	range	0.5	Prismatic rainbow dispersion — splits light into spectral colors
facets	range	5	Symmetry order — how many times the facet pattern repeats around the center
fresnel	range	0.05	Fresnel rim glow intensity around the crystal boundary
fresnelSoftness	range	1	Fresnel rim width — higher values spread the glow further inward
fresnelColor	color	#ffffff	Color of the fresnel rim glow
edgeSoftness	range	0	Softness of the crystal boundary edge
innerZoom	range	1.5	Magnification of content seen through the crystal
lightAngle	range	270	Light direction angle in degrees
highlights	range	0.5	Additive brightness on light-facing facets — never darkens
shadows	range	0.3	Darkening on shadow-facing facets — never brightens
brightness	range	1.2	Overall crystal brightness — higher values push facets toward brilliant white
tintColor	color	#e8e0ff	Crystal body tint color
tintIntensity	range	0	How much tint color is applied to the crystal interior
tintPreserveLuminosity	checkbox	true	Preserve original brightness when tinting
shape	shape	{"type":"sphere3D","radius":0.35}	Serialized shape configuration (JSON)
shapeSdfUrl	shape-upload		URL to a pre-generated SDF .bin file
shapeType	-		Active SDF shape type

Usage

vue

<Shader>
  <Crystal>
    <Circle />
  </Crystal>
</Shader>

CRTScreen CursorRipples