One language for every ShoSoft video and animated surface. Built from the 2.0 launch film and codified into foundations, timing, and components, so everything we ship moves like one product.
Palette, typography, logo, and the backgrounds every scene lives on.
→ 02MotionSix easings, timing rules, stagger rhythm, and the scene grammar.
→ 03ComponentsKickers, chips, browser cards, cursor beats, progress, and the CTA.
→ 04LibraryEvery finished cut. The launch film plus three creatives, in three ratios each.
→ 05StandardThe ship checklist, the product UI rules, and the embed contract.
→Taken directly from the launch film. If a frame could not belong to that film, it does not belong in the system.
Ink on light stages, plum gradients for dark bookends, one yellow. Soft pastel washes carry each product scene.
The mark stands alone on tiles and app frames. The wordmark lives on dark bookend scenes. Keep clear space of at least half the mark's width.
DM Sans only. Tight negative tracking on headlines, letterspaced caps for eyebrows.
The plum gradient with two or three blurred color blobs at low opacity. Used for hooks, lockups, and CTAs.
#F7F4FA with soft pastel corner shapes under .5 opacity. Product scenes and module grids live here.
Every entrance, exit, and idle in the system comes from this section. If a curve is not here, we do not use it.
Watch each one run. These are the only six.
Siblings never enter together. Headline words 80–90ms apart, chips ~95ms, list rows ~110ms.
Translation uses outExpo; the opacity ramp is shorter and finishes first.
Text rises 46–80px through an overflow mask. Big elements may add a 6–9px blur that resolves during entry.
inOutQuint. Content lifts 44–52px, fades, and blurs out. Dark scenes may scale to 1.06 instead.
UI cards rise 120–150px with a 10° rotateX settle while the shadow blooms.
Idle floats on chips, drifting background blobs, camera drift in 3D cuts, one cursor beat per scene.
Dark hook → logo reveal → light product scenes → module grid → dark CTA. 2.5–4.5s per scene, 15–25s total.
Scene-to-scene with masked exits and entrances. The launch film and the concept cuts speak this dialect.
One continuous camera through a corridor of panels: eased keyframe transits, constant sine drift, depth-of-field on out-of-focus stations. The value props cut speaks this one.
Live samples, straight from the videos. Reuse these, never re-invent them.
Rounded 16–18px, #E3E1EA border, #F2EFF6 bar with three dots and a centered app.shosoft.ai URL pill, deep plum shadow.
Real screens rebuilt in HTML/CSS with believable placeholder data. Counters count, charts draw, rows cascade. Never screenshots.
The launch film plus three creatives, each in 16:9, 1:1, and 9:16. Every cut plays here in the browser and downloads as an MP4, ready to upload. PMax takes five video slots, so one hero in three ratios plus one alternate in two fills the set.
The canonical piece and the source of the whole system. Left exactly as originally built, hand-coded product scenes with counting stats and drawing charts. This one runs as a live animation rather than a video file.
One unbroken camera move through a corridor of product panels: scheduling, workforce, invoicing, reporting, then a pull back to all four at once as the closing line lands.
Ten real tools fly in and drift, Excel, Sheets, Gmail, Outlook, Slack, QuickBooks and the rest, then collapse into a single point. Introducing ShoSoft, and the real dashboard grows out of it. The CEO's own framing, less busywork and more bookings.
The founder's story as pure typography, with a speech waveform standing in for the voice. Quote lines are placeholders until a real interview is cut.
Every cut above is a finished h264 MP4, rendered frame by frame rather than screen captured. The two hero cuts run 30 seconds and carry the ShoSoft music bed; Built by operators runs 20 and is silent. Download and upload straight to PMax.
The machine-readable source of truth lives beside the videos. View the raw standard (MOTION_GUIDELINES.md) ↗
What's on screen is the actual ShoSoft product, recreated in code the same way the launch film does it. A ShoSoft user should recognize every screen instantly.
Every UI panel corresponds to a real page. Match its layout, navigation, components, and hierarchy against the live app while building.
UI is rebuilt in HTML/CSS like the launch film's dashboard and calendar. No screenshots, no page captures, no embedded snapshots.
Interior animation is mandatory. Counters count, charts draw, bars grow, rows cascade. A static UI card is a broken scene.
Placeholder data, simplification of dense secondary detail, and motion. Structure and look stay true to the product.
render(t) is a pure function of the playhead. Seekable, exportable, identical every run.
?embed hides controls and loops. ?embed&poster=ms parks on a frame; hover posts ss-play / ss-pause.
Tab capture cropped to the stage, 16Mbps MP4, stops itself at the end card.
16:9, 1:1, and 9:16 share copy and timing but each gets its own layout: type scale, grids, card sizes, camera rig.
Dark hook, lockup beat, light product scenes, dark CTA with the agreed copy and shine sweep.
Only the six easings, timings inside the ranges, staggered entrances, masked reveals.
Hand-coded, animated, placeholder data, one cursor beat per scene.
All three aspect ratios scrubbed scene by scene before deploying, each with its own layout.