# ShoSoft Motion Guidelines

> Internal standard for every ShoSoft motion piece. Derived from the 2.0 launch film
> (`master-16x9.html`), which is the canonical reference. When a new video is made,
> check every section here against it before shipping. Last updated 2026-07-22.

## 1. Brand foundation

| Token | Value | Use |
|---|---|---|
| Ink | `#101114` | Headlines, body on light |
| Plum 1 / 2 / 3 | `#240B31` / `#3D1353` / `#5B1C7D` | Dark scene gradient stops |
| Dark gradient | `linear-gradient(150deg,#160722 0%,#240B31 34%,#3D1353 72%,#4A1766 100%)` | Hook + CTA scenes |
| Yellow | `#FFC107` | CTA, accents, progress, eyebrow dots |
| Lavender | `#CBB8E8` | Secondary text on dark |
| Light stage | `#F7F4FA` | Product scene background |
| Card border | `#E3E1EA` | UI cards on light |
| Accent washes | blue `#E4F0FB` · pink `#FBE7F0` · green `#E1F5EF` · amber `#FDF2D9` · violet `#EFE9FF` | Icon chips, per-scene radial washes |

- Typeface: **DM Sans** everywhere (400/500/600/700). Negative letter-spacing on
  headlines (-0.6 to -1.5px). No second typeface.
- Background texture on light scenes: 2 or 3 soft pastel circles (blurred or large
  border-radius shapes) pinned to corners, opacity under .5. On dark scenes: 2 or 3
  blurred color blobs (`filter:blur(90px)`, opacity ≤ .4) in plum/indigo/magenta.

## 2. Scene grammar

Every ShoSoft video follows a dark → light → dark arc.

1. **Hook (dark).** Yellow eyebrow kicker (small square + letterspaced caps),
   then a big white headline. No UI yet.
2. **Reveal (dark or light).** Logo moment. Mark or wordmark springs in with
   `outBack`, ring pulses optional.
3. **Product scenes (light).** One idea per scene: eyebrow + headline + subline +
   one UI card. Copy left / card right in 16:9 when the card is landscape;
   stacked and centered in 1:1 and 9:16.
4. **Module scene (light).** Chip grid, one chip per module, spring-staggered.
5. **CTA (dark).** Logo, agreed line ("Get started with ShoSoft venue management
   software today."), trial line, yellow pill button. End on a settled frame.

**The kit ships silent.** No soundtrack, no synthesized audio, no capture audio
on export, in any cut including the launch film. Every video has to land its
point with picture alone, because PMax placements autoplay muted.

Scene length 2.5 to 4.5s. Total 15 to 25s.

## 3. Easing library (use these, nothing else)

```js
outCubic   t => 1-(1-t)^3          // fades, opacity
outExpo    t => 1-2^(-10t)         // translations, the workhorse
outQuint   t => 1-(1-t)^5          // large translations, rotations settling
inOutQuint                          // scene exits and crossfades
outBack    c1=1.70158              // icon/logo pops (slight overshoot)
spring     1-e^(-6t)cos(12t)       // playful chip/icon entrances
```

## 4. Timing rules

- **Entrance stagger.** Sibling elements enter 80–170ms apart. Words of a
  headline: 80–90ms apart. Chips in a grid: ~95ms apart.
- **Entrance duration.** 600–750ms for translations (`outExpo`), 300–400ms for
  the paired opacity ramp (`outCubic`). Opacity always completes before motion.
- **Reveals.** Text enters through an `overflow:hidden` mask, translating up
  46–80px. Larger elements may add `blur(6–9px) → 0` during the first 60% of
  the entrance.
- **UI cards.** Enter with y 120–150 → 0 (`outExpo` ~750ms), scale .94 → 1, and
  in the value-props language a 10° `rotateX` settle (`outQuint`) with shadow
  blooming from soft to `0 34px 90px rgba(36,11,49,.28)`.
- **Scene exits.** 340–400ms `inOutQuint`. Outgoing content moves up 44–52px,
  fades, gains `blur(6–8px)`. Dark scenes may scale to 1.06 instead of moving.
- **Idle life.** Nothing sits still: slow Ken Burns on embedded UI (scale +0.04
  over the scene), floating chips (±4px sine), drifting blobs.

## 5. Product UI in video (the launch-film rule)

**What's on screen must be the actual ShoSoft product.** Not a stylized
abstraction, not an invented interface. The bar: a ShoSoft user should
recognize the screen instantly, and someone who signs up after watching
should find exactly what the video showed.

- **Recreate real screens.** Every UI panel corresponds to a real page
  (Dashboard, Calendar, Event workforce, Invoice, ...). Match its actual
  layout, navigation, component shapes, spacing, and visual hierarchy.
  Reference the live staging app (or the saved page exports in
  `~/Downloads/events-*.html`) while building — don't work from memory.
- **Hand-coded HTML/CSS, exactly like the launch film.** The launch film's
  dashboard and calendar cards are the template: real UI rebuilt in code.
  Never screenshots, never page captures, never embedded DOM snapshots.
  Code the UI out, then animate it.
- **Allowed deviations from the real app, and only these:** believable
  placeholder data, simplification of dense secondary detail (fewer table
  columns, fewer nav items), and motion. Structure and look stay true.
- App UI always lives in a **browser card**: rounded 16–18px, 1px `#E3E1EA`
  border, top bar `#F2EFF6` with three dots (soft red/amber/green) and a white
  URL pill reading `app.shosoft.ai/...`. Deep plum-tinted shadow. The app
  frame inside shows the real product chrome: plum sidebar with the mark and
  nav, page title row, yellow primary action.
- **Interior animation is mandatory** — the UI itself performs: counters count
  up ~900ms, donut arcs draw in with stagger, bars scaleX/scaleY in sequence,
  rows and chips cascade. A static UI card is a broken scene.
- Add idle motion (slow push-in) plus a **cursor beat**: white arrow glides in
  (`inOutQuint`, ~750ms), presses (scale .82 dip), and a yellow ripple ring
  expands at the click point. One cursor beat per scene, max.
- Data shown must be believable placeholder data. No zeros, no QA/test names,
  no real client contacts.

## 6. Recurring components

- **Eyebrow kicker.** 10px yellow rounded square + 15–17px 700 caps,
  letterspacing 3.5–4.5px, lavender-purple on light (`#7A6E92`-ish) or yellow
  on dark.
- **Progress dots.** During multi-part sequences: pill dots 34–38x8px,
  `#E3DDEB` base, yellow fill scaling X 0→1 linearly over the segment.
- **Module chips.** White cards, radius 22px, icon chip (soft wash bg + line
  icon), label 700, quiet sub-label. Enter spring + slight alternating rotate.
- **CTA button.** Yellow pill, `outBack` pop, then a single skewed shine sweep
  (~700ms, `inOutQuint`) at T-1s. Never loops.

## 7. Player and embed contract (every video file)

- Self-contained single HTML file, 60fps rAF timeline, `render(t)` pure
  function of the playhead (deterministic, seekable).
- Controls bar (Play/Restart/scrub/timecode/Export MP4) hidden in `?embed`.
- `?embed` loops; `?embed&poster=<ms>` seeks there and pauses; parent
  postMessage `ss-play`/`ss-pause` toggles playback (gallery hover).
- Embed tick renders at half rate. `window.__seek(ms)` / `window.__play`
  exposed for review tooling.
- Export: getDisplayMedia + CropTarget on `#stage`, 16Mbps, auto-stop at end.
- Aspect variants (16:9 / 1:1 / 9:16) change ONLY layout: stage size, font
  size variables, card zoom/position. Copy, timing, and animation code are
  identical across variants.

## 8. Consistency checklist for a new cut

- [ ] Dark hook with eyebrow + white headline, word-staggered
- [ ] Logo beat with outBack pop
- [ ] Light product scenes, one idea per scene, browser-card UI
- [ ] UI is the ACTUAL product, hand-coded and animated (§5) — no screenshots
- [ ] Easings only from §3, timings within §4 ranges
- [ ] Eyebrow kicker, progress dots, chips, CTA per §6
- [ ] Agreed CTA copy + trial line + shosoft.ai pill with shine
- [ ] Placeholder data everywhere (§5)
- [ ] Embed contract (§7) wired and gallery poster chosen
- [ ] All three aspect ratios verified scene by scene