Skip to content
Pinky UI

Experience-level UI

Shape the whole experience, quietly.

Navigation, Heroes, ambient backgrounds, page transitions and spatial interfaces—built from Pinky's shared motion, pointer, scroll and morph systems.

02 · Heroes

One signature interaction is enough.

Morphing Hero

Scroll turns one large visual statement into a calmer persistent surface.

Independent design practice

Spaces for slower, better work.

A meaningful compression, with no pinned scroll takeover.

Depth Hero

A few pixels of separation between atmosphere, artwork and content.

Quiet systems

Depth without the camera trick.

Four restrained layers, flattened for mobile and reduced motion.

Magnetic CTA Hero

Production copy, one tactile action and one low-intensity spotlight.

Pinky workshop

Design motion people can trust.

Start with semantics. Add the smallest response that explains the relationship.

03 · Backgrounds

Atmosphere that knows it is behind the content.

Soft Mesh Background

Three slow themeable fields pause when this section leaves view.

Interactive Gradient

A shared pointer source moves a broad, low-intensity local field.

Bubble Field

Ten deterministic orbs—not a particle engine—with optional gentle repulsion.

Spotlight Grid

A local light reveals structure without becoming a neon cyber grid.

04 · Transitions

Continuity without making people wait.

Shared Element Transition

Open the project surface: the source itself expands using Pinky's existing Morph architecture.

Bubble Transition

The content genuinely changes beneath a soft circular cover.

View 1

Listen first

Find the quiet signal before adding movement.

Liquid Wipe Transition

Two transform layers create an expressive, short chapter handoff.

View 2

Shape one response

Let one interaction explain the relationship.

Blur Route Transition

The calm production default, with focus transfer after change.

View 3

Release quickly

Return attention to the content, not the transition.

05 · Spatial

Depth is hierarchy, not a camera ride.

Floating Window Stack

Three product surfaces focus and recede without pretending to be an operating system.

Live overview

42% calmer handoffs

Live overview

19 experience patterns

Live overview

Keyboard paths passing

Orbit Menu

A labeled action arc with a compact linear fallback and focus restoration.

Browse all · 32 experiences

The full set of experiences, easy to reach.

Live studies stay above. This compact catalogue keeps the full family visible, with canonical patterns first and quieter variations kept in context.

name / relationship / detail

navigation

17 entries

heroes

3 entries

backgrounds

4 entries

transitions

4 entries

spatial

4 entries