Crystalline
Physics-based fragmentation with rotating crystal shards.
Main Features of Crystalline
How to Use Crystalline in Next.js
Installation Guide for Crystalline
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | bg-zinc-950 | Background color of the component |
title | string | Crystalline | Title text displayed |
subtitle | string | Move quickly to see shards | Subtitle text displayed |
velocityThreshold | number | 5 | Velocity threshold for shard creation |
particleColor | string | rgba(255, 255, 255, 1) | Color of the shard particles |
sizeMin | number | 2 | Minimum shard size |
sizeMax | number | 8 | Maximum shard size |
lifeDecay | number | 0.02 | Shard life decay rate |
gravity | number | 2 | Gravity effect on shards |
spinRange | [number, number] | [-5, 5] | Range of spin rotation |
angleRange | [number, number] | [0, 360] | Range of initial angles |
className | string | Additional CSS classes |
Related Components
When to Use
Perfect for tech-focused portfolios, digital product launches, and Next.js applications with a 'crystalline' or 'geometric' design system. Use this React component to add a sharp, high-energy fragmentation effect that triggers when the user moves their cursor quickly.
Best Practices
Optimize for performance by ensuring the `velocityThreshold` is high enough so shards only appear during intentional quick movements. To follow React best practices, use the `gravity` prop to ensure shards fall off-screen naturally without cluttering the viewport. Maintain consistent spacing within your design system by keeping the `sizeMax` within a professional range.
Why This Component Matters in Modern UI Development
Crystalline and fragmentation effects are at the forefront of modern UI design for technical brands. This animated UI component helps شما build an interface that feels reactive and precise, adding semantic authority and visual depth to your real-world application architecture.
Frequently Asked Questions
QCan I use custom icons as shards?
The current version uses geometric polygons for performance, but the drawing loop can be extended to support custom SVG paths or icons.
QWhat triggers the shatter effect?
The effect is triggered by mouse velocity; once the movement speed exceeds the `velocityThreshold`, new shards are instantiated.
QIs the rotation random?
Yes, each shard is assigned a random spin from the `spinRange` to ensure the fragmentation looks organic and unscripted.