Parallax Pills
Bouncy labeled pills that drift along with your cursor
Customize
Props
21| Name | Type | Default | Description |
|---|---|---|---|
pills | ParallaxPillItem[] | 5 default pills | Foreground pills. Each item has label, background, color, x/y/width as percentages, optional rotate and parallax multiplier |
backgroundPills | Omit<ParallaxPillItem, 'label' | 'color'>[] | 6 decorative pills | Decorative unlabeled pills behind the foreground for depth |
width | string | number | "100%" | Container width |
height | string | number | 480 | Container height |
className | string | "" | Additional CSS classes for the outer container |
pillRadius | number | 18 | Pill border-radius in px (8–48) |
pillHeight | number | 64 | Pill vertical height in px (32–120) |
fontSize | number | 18 | Label font size in px (10–32) |
fontWeight | number | string | 500 | Label font weight |
parallaxStrength | number | 24 | Maximum cursor parallax displacement in px (mapped to ±strength) (0–80) |
disableParallax | boolean | false | Disable cursor parallax entirely |
disableEmptyPills | boolean | true | Hide the decorative unlabeled background pills |
disableEntry | boolean | false | Disable the elastic entry animation; pills render in their resting state |
entryStagger | number | 0.08 | Stagger between pill entry animations in seconds (0–0.4) |
entryStiffness | number | 140 | Spring stiffness for the entry bounce (40–400) |
entryDamping | number | 11 | Spring damping for the entry bounce; lower values overshoot more (4–30) |
entryDistance | number | 220 | How far above their resting position pills start, as a percent of pill height. Larger values make pills fall from higher up (50–800) |
hingeChance | number | 0.5 | Probability (0–1) that a pill enters with a hinge tilt. One end hanging lower as if heavier, then springing back |
hingeAngle | number | 18 | Magnitude of the initial hinge tilt in degrees; the heavy end starts this far past resting (0–45) |
parallaxStiffness | number | 60 | Spring stiffness for the parallax drift (10–200) |
parallaxDamping | number | 18 | Spring damping for the parallax drift (4–40) |
pillsParallaxPillItem[]Foreground pills. Each item has label, background, color, x/y/width as percentages, optional rotate and parallax multiplier
5 default pillsbackgroundPillsOmit<ParallaxPillItem, 'label' | 'color'>[]Decorative unlabeled pills behind the foreground for depth
6 decorative pillswidthstring | numberContainer width
"100%"heightstring | numberContainer height
480classNamestringAdditional CSS classes for the outer container
""pillRadiusnumberPill border-radius in px (8–48)
18pillHeightnumberPill vertical height in px (32–120)
64fontSizenumberLabel font size in px (10–32)
18fontWeightnumber | stringLabel font weight
500parallaxStrengthnumberMaximum cursor parallax displacement in px (mapped to ±strength) (0–80)
24disableParallaxbooleanDisable cursor parallax entirely
falsedisableEmptyPillsbooleanHide the decorative unlabeled background pills
truedisableEntrybooleanDisable the elastic entry animation; pills render in their resting state
falseentryStaggernumberStagger between pill entry animations in seconds (0–0.4)
0.08entryStiffnessnumberSpring stiffness for the entry bounce (40–400)
140entryDampingnumberSpring damping for the entry bounce; lower values overshoot more (4–30)
11entryDistancenumberHow far above their resting position pills start, as a percent of pill height. Larger values make pills fall from higher up (50–800)
220hingeChancenumberProbability (0–1) that a pill enters with a hinge tilt. One end hanging lower as if heavier, then springing back
0.5hingeAnglenumberMagnitude of the initial hinge tilt in degrees; the heavy end starts this far past resting (0–45)
18parallaxStiffnessnumberSpring stiffness for the parallax drift (10–200)
60parallaxDampingnumberSpring damping for the parallax drift (4–40)
18