Parallax Pills

Bouncy labeled pills that drift along with your cursor

parallax-pills-tw

Components

Animations

Backgrounds

Text Effects

Blocks + Templates

Customize

Tweak the props live

Style

Pill Height64

Pill Radius18

Font Size18

Entry

Disable Entry

Stagger0.08

Entry Stiffness140

Entry Damping11

Entry Distance220

Hinge Chance0.5

Hinge Angle18

Parallax

Disable Parallax

Disable Empty Pills

Strength24

Drift Stiffness60

Drift Damping18

Props

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

Default:5 default pills

backgroundPillsOmit<ParallaxPillItem, 'label' | 'color'>[]

Decorative unlabeled pills behind the foreground for depth

Default:6 decorative pills

widthstring | number

Container width

Default:"100%"

heightstring | number

Container height

Default:480

classNamestring

Additional CSS classes for the outer container

Default:""

pillRadiusnumber

Pill border-radius in px (8–48)

Default:18

pillHeightnumber

Pill vertical height in px (32–120)

Default:64

fontSizenumber

Label font size in px (10–32)

Default:18

fontWeightnumber | string

Label font weight

Default:500

parallaxStrengthnumber

Maximum cursor parallax displacement in px (mapped to ±strength) (0–80)

Default:24

disableParallaxboolean

Disable cursor parallax entirely

Default:false

disableEmptyPillsboolean

Hide the decorative unlabeled background pills

Default:true

disableEntryboolean

Disable the elastic entry animation; pills render in their resting state

Default:false

entryStaggernumber

Stagger between pill entry animations in seconds (0–0.4)

Default:0.08

entryStiffnessnumber

Spring stiffness for the entry bounce (40–400)

Default:140

entryDampingnumber

Spring damping for the entry bounce; lower values overshoot more (4–30)

Default:11

entryDistancenumber

How far above their resting position pills start, as a percent of pill height. Larger values make pills fall from higher up (50–800)

Default:220

hingeChancenumber

Probability (0–1) that a pill enters with a hinge tilt — one end hanging lower as if heavier, then springing back

Default:0.5

hingeAnglenumber

Magnitude of the initial hinge tilt in degrees; the heavy end starts this far past resting (0–45)

Default:18

parallaxStiffnessnumber

Spring stiffness for the parallax drift (10–200)

Default:60

parallaxDampingnumber

Spring damping for the parallax drift (4–40)

Default:18