CrystalBackdropText

CrystalBackdropText renders oversized text behind content as a decorative layer. Supports single and dual-layer variants with GSAP slide-in and scale animations. The text sits at very low opacity to avoid competing with foreground content.

Import

import { CrystalBackdropText } from '@artasce/crystal-ui';

Usage

<div className="relative">
  <CrystalBackdropText text="ARCHITECT" />
  <div className="relative z-10">
    <h2>Our Services</h2>
  </div>
</div>

Props

CrystalBackdropText Props

Token	Variable	Value	Description
`text`	`string`	(required)	Text content to render as backdrop
`variant`	`'single' \| 'dual'`	'dual'	Single or dual-layer rendering
`color`	`'default' \| 'amethyst'`	'amethyst'	Color theme
`foregroundOpacity`	`number`	0.05	Front layer opacity (dual mode)
`backgroundOpacity`	`number`	0.008	Back layer opacity (dual mode)
`delay`	`number`	0	Animation start delay (seconds)
`respectReducedMotion`	`boolean`	true	Respect prefers-reduced-motion
`className`	`string`	—	Additional CSS classes

Values update live with theme changes. Click any row to copy the CSS variable.

Variants

Dual (Default)

Two layers at different opacities and scales create depth:

<CrystalBackdropText text="DESIGN" variant="dual" />

Single

A single text layer, simpler and lighter:

<CrystalBackdropText text="SYSTEMS" variant="single" foregroundOpacity={0.03} />