Motion craft standard — reference, not prompt

Result — Handed alongside motion work. The house timing bands and the cheap/expensive lists are what models actually absorb.

# Motion notes — the standard this asset should hit

Written for whoever refines RAIL STORE. These are the things that separate a
correct implementation from one that feels expensive. Everything here is a
judgement call, so disagree where you have a better argument.

## The garment turn is the whole asset

If only one thing gets your attention, it is this. Currently the turn is an 240 ms
opacity crossfade between two prepared images. It is *correct* and it is *cheap*.

What the reference shows is a garment **physically turning on its hanger**. The
hanger does not move. The hook does not move. The garment rotates about the vertical
axis through the hook, so its silhouette narrows to almost nothing at the halfway
point and the chest print slides across and out of view.

Ways to get there, roughly in order of how good they look per unit of risk:

1. **3D transform with a two-image face.** Put the `front` view on the front face and
   the `side` view on a rotated face, and rotate the pair about Y with
   `transform-style: preserve-3d`. Real geometry, real foreshortening. Needs care:
   the two images have different widths, so the hinge has to be the hook, not the
   image centre.
2. **Crossfade plus a strong horizontal squeeze.** Scale X from the side view's
   aspect to the front view's, with the easing on `cubic-bezier(0.22,1,0.36,1)` and
   the squeeze passing through ~0.15 at the midpoint. Much simpler, reads as a turn,
   and is very hard to break.
3. **Layered parallax.** Side view and front view offset horizontally and cross-faded
   on slightly different timers, so the two never resolve at the same instant. Reads
   as depth. Cheap.

Whichever you choose: **the hook must be the pivot.** A garment that scales or
rotates about its own centre detaches from the rail, and that single detail is what
makes an implementation look amateur. `transform-origin` should be the hook, which is
at 3.11% down the canvas and horizontally centred.

Do not let the neighbours move before the hovered garment does. The spread should
read as *the row making room*, so it lags the turn by ~40–60 ms rather than starting
with it.

## Durations and easing — house positions

- Durations that affect a *decision* (hover on a control): 120–160 ms. Longer feels
  laggy; the user is waiting on their own intent.
- Durations that show *the object obeying physics* (the garment turn, the overlay):
  220–320 ms. Anything shorter reads as a cut, anything longer as a loading bar.
- Staggered elements: 40–80 ms apart, never more. Beyond that the lag reads as jank.
- Easing: `cubic-bezier(0.22, 1, 0.36, 1)` (ease-out-quint) for anything arriving.
  `ease-out` for small state changes. **Never** ease a marquee — constant velocity or
  it looks like a stalled scroll.
- Never animate a focus ring. It must appear instantly, because it is an
  accessibility affordance and a delayed one is a usability failure.

## Things that read as expensive

- **Nothing arrives from nowhere.** Every element that appears should be moving
  *from* a plausible origin — the caption from the garment, the overlay from the
  catalogue layer, the pill from below. Instant appearance is what makes interfaces
  feel like jump-cuts.
- **The tap/stroke of a physical material.** A garment has weight. When the row
  spreads, do not let it glide uniformly — a hair of overshoot on the neighbours, or
  a 1.5% settle, is what makes it read as cloth rather than CSS.
- **Optical alignment over mathematical alignment.** A centred uppercase micro-label
  with letter-spacing needs its left sidebearing compensated or it reads 1px right.
  The counter and the name are optically centred as a pair, not each individually.
- **Restraint in the field.** The pegboard is a designed surface, not a pattern. It
  should be legible at 30 cm and gone at 1 m. If you can see individual rings while
  looking at a garment, it is too strong.
- **Continuous, seamless loops.** The marquee must not jump at the wrap. Translate by
  exactly one content-width, and make sure the duplicated copy is `aria-hidden` with
  no focusable element in it.

## Things that read as cheap — avoid these specifically

- Long durations on micro-interactions.
- Spring/bounce easing on anything that is not a deliberate physical metaphor.
- Shadows as decorative drops rather than as light. A shadow that is a soft grey blob
  under an object is a 2013 app icon; a shadow that falls *away from a consistent
  light source* and softens with distance is photography.
- Fading both ends of a transition so nothing is ever quite opaque.
- Animating `width`/`height`/`top`/`left` where `transform` would do. The spread
  currently animates `left`, which relayouts the row on every frame — transform is
  the correct channel and it is also smoother.
- Motion that continues when the user has asked for less of it. `prefers-reduced-motion`
  must produce instant swaps and a static marquee, not "the same thing but faster".

## The bar

Look at the reference frames in `/home/ubuntu/menashi-webstore/crops/` again before
you start and after you finish. The question is not "does mine match" — it is
**"would someone screenshot mine and post it"**. If the answer is no, find the thing
that makes it no and fix that, not the three easiest things instead.

kind

motion

type

skill

model

any

effort

high

tool

manual

author

designer

status

proven

project

rail-store

created

2026-10-03

first used at /home/ubuntu/rail-store/references/motion-notes.md