Input · proximity
tap to try01 / 18Magnetic Button
Magnetic Button gives a spacious action a small pull before activation. The button stays anchored while its surface leans toward an approaching pointer.
approach → capped pull
Open recipe →Skills · interaction recipes
A skill answers the question an API cannot: what the interaction is for, when it is the wrong choice, and which few variables keep it feeling like Pinky UI.
Featured recipes
Hover or focus one recipe at a time. Its real component answers immediately; the rest stay quiet.
Input · proximity
tap to try01 / 18Magnetic Button gives a spacious action a small pull before activation. The button stays anchored while its surface leans toward an approaching pointer.
approach → capped pull
Open recipe →Shape · geometry
tap to try02 / 18Morph expands one surface into another as one continuous object. It is a geometry transition with dialog semantics, not a generic fade between panels.
resting surface → more room
Open recipe →Input · depth
tap to try03 / 18Turn a small set of button depth models into a deliberate interaction hierarchy. Tactile press is useful when primary, secondary, and quiet actions should feel related without becoming identical.
lift → contact → settle
Open recipe →Navigation · trigger
tap to try04 / 18Choose trigger motion that explains how a compact navigation control changes state without turning the trigger into a miniature animation showcase.
mark → stateful close
Open recipe →Input · material
tap to try05 / 18Give a primary action a physical face and a visible base, then let the face travel toward that base when the user engages it.
lift → collapse
Open recipe →Input · layers
tap to try06 / 18Separate a button face from a colored backing plate to create tactile depth without the weight of a large shadow.
separate → recombine
Open recipe →Input · recess
tap to try07 / 18Use a recessed surface for a quiet action that should feel integrated into its container rather than floating above it.
recess → flush → deeper
Open recipe →Input · semantics
tap to try08 / 18Let the action’s geometry indicate where the interface will move next: forward, back, or into a related surface.
meaningful arrow travel
Open recipe →Input · proximity
tap to try09 / 18Frame a compact icon action with two concentric response layers: a stable hit target and a quieter outer ring that can acknowledge proximity.
near field → ring response
Open recipe →Navigation · geometry
tap to try10 / 18Use paired brackets as a compact navigation trigger whose open state feels like a frame expanding to reveal content.
brackets → framed close
Open recipe →Navigation · structure
tap to try11 / 18Build a menu trigger from two aligned rails that separate and recompose as navigation opens and closes.
counter-slide → recombine
Open recipe →Navigation · type
tap to try12 / 18Use a word-based menu trigger when clarity matters more than icon shorthand, while still giving open and close states a refined visual transition.
rule draw → word travel
Open recipe →Input · press
tap to try13 / 18Ripple Button answers where a button was pressed with one soft expanding surface and a whole-button compression. It is tactile feedback, not a Material ripple or a second action.
contact → bounded wave
Open recipe →Navigation · compact
tap to try14 / 18Morph Menu turns a compact trigger into a short navigation surface with the same object continuity as the trigger. It is Pinky’s canonical compact navigation pattern.
trigger → navigation surface
Open recipe →Cursor · proximity
tap to try15 / 18Magnetic Cursor Target composes one proximity field with one semantic cursor target. It can pull the target, claim a cursor label, or do both without inventing a second attraction algorithm.
near field → target pull
Open recipe →Shape · collection
tap to try16 / 18Gallery ↔ List Morph lets one stable collection switch between visual discovery and fast metadata scanning. Items travel because their identity stays the same.
grid → list continuity
Open recipe →Shape · media
tap to try17 / 18Morph Lightbox expands a selected thumbnail into a focused media collection view while preserving which thumbnail the user chose.
thumbnail → inspection
Open recipe →Scroll · relationship
tap to try18 / 18Sticky Story pairs a sticky supplemental visual with a normal-flow sequence of story steps. The reader moves through the content; the visual changes quietly to match the active step.
reading step → visual state
Open recipe →Full recipe catalogue
The folders remain useful for imports; the discovery language stays aligned with the site taxonomy.
Pieces with a direct surface or control response.
When to reach for a component, and when to reach for a different one.
Collection arrangements where geometry carries meaning.
How to arrange a collection, and how many items each arrangement can carry.
Navigation, heroes, atmosphere and transitions.
Animated wayfinding that never delays location or destination clarity.
Page-opening compositions with one intentional signature interaction.
Ambient surfaces that stay quiet, legible and inexpensive.
State and route handoffs that preserve focus and navigation semantics.
Depth patterns that flatten gracefully and keep reading order stable.
Media, product controls, collections, overlays and workflows with real state.
Media inspection and playback patterns with honest loading and touch behaviour.
Tactile controls that preserve labels, focus, validation and precision.
Lightweight data interactions with stable textual interpretations.
Messages, status and recovery surfaces chosen by consequence and context.
Keyboard-first finding and command interactions that preserve focus.
Loading and progress feedback that communicates time without noise.
Product lists and rows with disclosure, focus and mobile actions.
Reordering systems where pointer movement always has an accessible alternative.
Teaching surfaces that respect attention, skip paths and product context.
Touch-first patterns with explicit controls and gesture etiquette.
Content browsing systems where preview, focus, disclosure and spatial continuity carry the story.
Contextual surfaces that stay anchored, layered and usable across pointer, keyboard and touch.
Cursor, motion, text and scroll as expressive layers.
Pointer enhancements with keyboard, touch and restraint guidance.
Entrances, morphs and loaders that preserve readable content.
Text motion that supports hierarchy without compromising language.
Scroll relationships that keep native flow and performance intact.
One reusable behaviour at a time.
The reusable behaviours, and the judgment each one needs.
Restraint, composition and accessibility guidance.
System-level guidance: density, restraint, reduced motion, composition.