PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Starfield Card

A 3D warp-speed starfield canvas card that smoothly accelerates from gentle stellar drift into high-velocity warp lightspeed streaks on pointer hover.

When to use

  • AI, futuristic, space-themed, or developer tool product feature highlights.
  • Hero showcase cards requiring procedural GPU-accelerated canvas motion.
  • Interactive cursor acceleration that dynamically detects dark and light theme background tokens.

When not to use

  • Low-power embedded browsers where HTML5 Canvas rendering overhead must be avoided.
  • Static document cards without interactive motion needs.

API Reference

StarfieldCardProps

PropTypeDefaultDescription
titlestring"PaceUI Crafts"Main headline title text displayed on the card.
hintTextstring"Hover for lightspeed"Subtitle tooltip or interaction prompt (fades out during warp).
childrenReactNode—Additional custom elements or overlays rendered within the bottom content container.
baseSpeednumber0.9Idle cruise speed of the stars moving through 3D space.
warpSpeednumber5.0Maximum lightspeed velocity achieved during pointer hover.
classNamestring—Additional CSS class names.

Motion

  • High-performance HTML5 Canvas with 3D coordinate projection (x, y, z) and perspective FOV distortion.
  • Dynamic streak gradients with hue-cycled spectrum and depth-based opacity attenuation.
  • Adaptive speed ramping (0.6s acceleration, 0.8s deceleration) with reduced-motion static frame fallback.