Jelly Card
A soft elastic surface that responds naturally to pointer movement.
- cards
- jelly
- depth
- glow
- card
- elastic
- hover
- spring
Elastic surface
Leans, drifts, settles
Pointer-driven deformation with a spring return.
Quick usage
import { JellyCard } from "@pinky-ui/components";
<JellyCard elasticity={0.35} intensity={0.18}>
<ProfileCard />
</JellyCard>Presets
Soft
The default. Gentle lean, quiet settle.
elasticity={0.35} intensity={0.18} hoverScale={1.02}
Subtle
Barely there. Good for dense grids.
elasticity={0.15} intensity={0.08} hoverScale={1.01}
Elastic
More lean, more overshoot.
elasticity={0.65} intensity={0.28} hoverScale={1.03}
Playful
Maximum wobble. One per screen, at most.
elasticity={0.9} intensity={0.4} hoverScale={1.04}
Install
Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/componentspnpm add @pinky-ui/componentsyarn add @pinky-ui/componentsnpx pinky-ui add jelly-cardPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| elasticity | number | 0.35 | 0 settles calmly, 1 wobbles visibly on release. |
| intensity | number | 0.18 | How far the surface leans and drifts toward the pointer. |
| hoverScale | number | 1.02 | Scale while hovered. Pinky keeps this at or under 1.04. |
| radius | "md" | "lg" | "xl" | "2xl" | "xl" | Corner radius from the shape scale. |
| glow | boolean | true | Soft light that follows the pointer across the surface. |
| elevated | boolean | true | Applies Pinky's atmospheric shadow. |
| padded | boolean | true | Turn off for edge-to-edge media inside the card. |
| className | string | — | Applied to the outer element, so grid and flex placement work as expected. |
| surfaceClassName | string | — | Applied to the inner surface, for padding, background or text overrides. |
| disabled | boolean | false | Renders the static surface with no pointer response. |
Accessibility
- Renders a plain container — any semantics you put inside are preserved.
- Effects are transform-only, so surrounding layout never shifts.
- Pointer response is skipped entirely for touch input; content stays fully usable.
- Interactive children keep their own focus outlines and hit areas.
Reduced motion
With prefers-reduced-motion: reduce, the card renders as a static surface. No lean, drift, scale or pointer glow — the styling, shadow and content are unchanged.
When to use
- Feature cards and product highlights
- Portfolio and case-study tiles
- A small number of hero surfaces that should feel alive
When not to use
- Forms and input-heavy panels
- Dense data tables
- Long repeated lists, where per-item motion becomes noise
- Anything wrapping a critical destructive action
Playground
Mira Odaka
Interaction designer
Drag your pointer across this card and watch how the parameters change its character.
<JellyCard
elasticity={0.35}
intensity={0.18}
hoverScale={1.02}
radius="xl"
>
<ProfileCard />
</JellyCard>