Quartz Crystal

A floating quartz with nine animated facets, local layout, and optional parallax.

Components / Quartz Crystal

Surfacescrystaldecorativemotionparallax

Decorative nine-facet crystal with slow floating motion, rotating faces, optional bounded pointer parallax, and reduced-motion support.

Preview

Loading preview…

Usage

A floating quartz with nine animated facets, local layout, and optional parallax.

<QuartzCrystal color="#ee1401" width={120} height={240} durationMs={5000} parallax />

Files

components/steez/QuartzCrystal.tsxcomponent

components/steez/QuartzCrystal.module.cssstyle

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { QuartzCrystal } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/quartz-crystal.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { QuartzCrystal } from "<project-root>/components/steez/QuartzCrystal";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/quartz-crystal.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Crystal Button

A six-point crystal action, horizontal with text or vertical with an icon.

Boiling Lines

Hand-drawn motion for artwork, SVG lines, and decorative borders.

Hexagon Grid

Animated hex field backdrop for avatars, launch surfaces, and atmospheric panels.