HoloFx

Updated: May 11, 2025

HoloFx simulates a holographic light sheen by layering interactive visual effects like shine, burn, and texture over any content block. It uses radial masks and mouse tracking to shift light and create movement. Not supported on touch-screens.

HoloFx

Proxima B

<HoloFx
  border="brand-alpha-weak"
  maxWidth={24}
  aspectRatio={3 / 4}
  radius="l"
  shine={{
    opacity: 30,
    blending: "color-dodge",
  }}
  burn={{
    opacity: 30,
    blending: "color-dodge",
  }}
  texture={{
    opacity: 10,
    image: "/images/textures/foil.jpg",
    blending: "color-dodge",
  }}
>
  <Media src="/images/docs/once-ui/proxima-b.jpg" />
  <Fade>
    Proxima B
  </Fade>
</HoloFx>

Performance

HoloFx automatically detects low-end devices and the prefers-reduced-motion system setting. When either is detected, the mouse-tracking effect is paused. The effect also pauses when the element is outside the viewport. You can override this with the reducedMotion prop. See useReducedMotion for details.

API reference

HoloFx Props

Prop	Type	Default
children	React.ReactNode	—
reducedMotion	booleanauto	auto
shine The specular highlight layer. See Shine Props below.	{ opacity?: number; filter?: string; blending?: CSSProperties["mixBlendMode"]; mask?: MaskOptions; }	—
burn The blown-out highlight layer. See Burn Props below.	{ opacity?: number; filter?: string; blending?: CSSProperties["mixBlendMode"]; mask?: MaskOptions; }	—
texture The overlaid texture layer. See Texture Props below.	{ opacity?: number; filter?: string; blending?: CSSProperties["mixBlendMode"]; image?: string; mask?: MaskOptions; }	—
…and every FlexProps prop	inherited	—
className	string	—
style	React.CSSProperties	—

Shine Props

Prop	Type	Default
opacity	number	30
filter	string	—
blending	mixBlendMode	color-dodge
mask	MaskOptions	—

Burn Props

Prop	Type	Default
opacity	number	30
filter	string	brightness(0.2) contrast(2)
blending	mixBlendMode	color-dodge
mask	MaskOptions	—

Texture Props

Prop	Type	Default
opacity	number	10
filter	string	—
blending	mixBlendMode	color-dodge
image	string	repeating-linear-gradient(...)
mask	MaskOptions	—

Mask Options

Prop	Type	Default
maskPosition	string	100 200

EffectsGlitchFx

EffectsLetterFx

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club