PIXLIFY / COMPONENTS LAB
PREMIUM COMPONENT · $24
PHYSICS · CAPSULE COLLISIONS · ZERO DEPENDENCIES
Your services, skills or tags drop in, tumble and pile up with real physics. Visitors can grab, throw and shake them. A playful hero or footer moment that people actually touch.
LIVE PREVIEW - TAGS DROP IN ON LOAD · GRAB AND THROW THEM
FOCUS + ENTER SHAKES · ARROWS BLOW · R DROPS AGAIN
VARIANTS & PRESETS
01 - LIGHT THEME
Ink on paper
Dark tags on a warm light background with an orange accent.
02 - BIG & BOUNCY
Fewer, bigger words
34px type and higher bounce for a loud hero moment.
03 - LOW GRAVITY
Moon mode
Gravity 0.4 and low friction - tags float down and drift.
04 - MOBILE
Narrow pile
Mobile Scale shrinks tags and Mobile Max limits the count on phones.
HOW TO USE
01
Drop it on the canvas
Insert Gravity Playground from Assets. Give it a fixed height (400-700px works well) and Fill width. The canvas shows the settled pile.
02
Write your tags
Open Tags and add one row per pill. Each tag has its own Style: Solid, Outline or Accent - mix them for rhythm.
03
Add your own layers (slots)
Layers accepts any Framer component or frame - logos, stickers, emoji, avatars. They fall and collide with the tags using their own size.
04
Set typography & look
Font uses Framer’s full font picker. Look holds fills, outline, accent colours, pill padding, background and radius.
05
Tune physics
Gravity, Bounce, Friction and Drop Tilt. Start decides whether the drop waits until the component scrolls into view or runs on load.
06
Preview
Hit Preview to feel it. On phones, Mobile Scale shrinks the pills and Mobile Max limits how many tags drop.
PROPERTY CONTROLS
Tags
Array of pills: Text + Style (Solid / Outline / Accent). Up to 40.
Layers
Slot array - any component or frame becomes a physical body (up to 12).
Font
Full font control: family, weight, size, letter spacing.
Look → Solid Fill / Solid Text
Colours of Solid pills.
Look → Outline
Stroke and text colour of Outline pills.
Look → Accent Fill / Accent Text
Colours of Accent pills.
Look → Padding X / Y
Inner padding of every pill.
Look → Background / Radius
Container background colour and corner radius.
Physics → Gravity
Strength of gravity (0.1-3).
Physics → Bounce
How much bodies bounce off walls and the floor (0-0.9).
Physics → Friction
Floor friction - higher values stop sliding sooner.
Physics → Drop Tilt
Random rotation of pills as they spawn (0 = flat).
Behaviour → Start
In View waits until 35% is visible; On Load drops immediately.
Behaviour → Stagger
Delay between bodies dropping, as a share of the height.
Behaviour → Cursor Push
Cursor gently pushes pills aside while hovering.
Behaviour → Mobile Scale / Mobile Max
Pill scale and max tag count under 600px width.
PERFORMANCE
Custom 60fps verlet solver with broad-phase culling, DOM transforms only (no layout thrash). The loop sleeps when the pile settles and pauses off-screen.
MOBILE
Under 600px pills scale down and the tag count is capped. Touch drags pills; vertical page scrolling still works.
ACCESSIBILITY
Tags are real text. Focusable container with keyboard shake/wind/redrop. Reduced motion shows the settled pile without animation.
© 2026 PIXLIFY - MADE IN WARSAW
GRAVITY PLAYGROUND · PREMIUM COMPONENT · $24