Gen Z SVG Illustrations for Ergonomics Deck

Commercial SVG scenes + idle animations for a 10-slide ergonomics get-started deck


SUMMARY

Need SVG scenes and idle loops for a 10-slide setup walkthrough before typing lessons. Motion is decorative; on-screen copy is the source of truth. Loops run only while idle, stop on input, resume after ~4s idle. Support prefers-reduced-motion with a static settled educational frame (no loops).

Tone: playful Gen Z for younger adults, not childish. One composition per slide. Prefer CSS-driven SVG. Deliver SVGs + motion specs or CSS keyframes for our existing Vite/TS deck shell.


LICENSE AND IP (REQUIRED)

Paid commission. Original draw and/or open-source OK if commercial-use licenses are clear and documented (source URL + license name). No personal-use-only or murky licenses.

Style consistency: one line weight, palette, and look from kickoff through all 10 finals. Restyle open-source bases so the set does not look like mixed packs.

Upon payment and accepted final delivery, copyright in the commissioned deliverables (final SVGs, layers, animation/CSS, previews) is assigned to the client, except open-source attribution/share-alike we approved in writing at kickoff. No reselling the accepted pack as stock. Portfolio use only with written approval after acceptance. Warrant originality / proper licensing.


REVIEW CHECKPOINTS (plan timeline around these)

1. Kickoff: 1–2 style samples (prefer sit + home-row), source plan (draw vs open source), one motion sample. Locks the look.
2. Midway: all 10 scene roughs/near-finals + draft motion timing; one consolidated feedback round.
3. Final: production SVGs, final motion/CSS, reduced-motion statics, license/IP packet; acceptance then payment.


GLOBAL RULES

Idle gate, reduced-motion settled frames, copy over motion, light CTA pulse OK, soft chrome cues secondary, accessible without relying on animation, no badge clutter on diagrams.

Hands: real hands not blobs; articulated fingers preferred; left pinky on A through index on F; fingertips toward keys; right hand for Space matches style; layered SVG preferred for finger/thumb animation.


10 SCENES

1) welcome — Title: Alright, let's get you set up
Teach: short setup walkthrough, not a lecture.
Scene: soft brand/ready mark. Idle: gentle breathe. Reduced: static. CTA: Start

2) sit — Title: Sit like you mean it
Teach: feet grounded, shoulders chill, spine upright. Do NOT teach arms/eye level/screen distance.
Scene: seated figure + cue labels. Idle: highlight feet then shoulders then spine. Reduced: all cues, no cycle

3) keyboard — Title: Keyboard placement
Teach: keyboard flat; wrists elevated/straight; not kicked up. Do NOT teach screen distance/eye level.
Scene: desk keyboard + elevated wrists + "not kicked up" contrast. Idle: soft pulses on good cues. Reduced: good layout static

4) screen — Title: Screen placement
Teach: ~arm's length; top near eye level; eyes on story not keys.
Scene: viewer + screen + eye-level guide. Idle: too low then too high then just right (X/check). Reduced: just-right only

5) keys-slant — Title: Plot twist: the keys are on a slant
Teach: rows staggered, orientation only.
Scene: A S D F labels; F nub under letter. Idle: straight grid to stagger, hold, reset. Reduced: staggered static. No labeled J key

6) home-row — Title: Home row = your home base
Teach: left hand on A S D F (pinky A to index F).
Scene: left hand over ASDF + F nub. Idle: settle raised to rest. Reduced: already on keys

7) thumbs — Title: Right thumb owns Space
Teach: right thumb taps Space; left thumb hangs out.
Scene: left parked on home; Space bar; right hand. Idle: right enters; thumb taps Space; loop. Reduced: already on Space. Locked: left parked; only right thumb for Space

8) one-hand — Title: One hand at a time (we're serious)
Teach: left letter groups first, then right.
Scene: left/right hand silhouettes (not tiles); LEFT first / RIGHT later. Idle: left emphasis; soft right-later cue. Reduced: left-first, no pulse

9) associative — Title: Letter <-> finger <-> key
Teach: letter <-> finger <-> key; eyes on story. Concrete A example.
Beats: (1) story name e.g. Alex (2) letter A (3) left pinky (4) pinky presses key A
Idle: story then letter then finger then key, ~1.5–2s each. Reduced: beat 4 only

10) lets-go — Title: You're cleared for takeoff
Teach: optional ergonomics links + handoff to lesson.
Scene: ready mark. Idle: soft pulse + CTA pulse. Reduced: static. Keep links: OSHA computer workstations; CCOHS office ergonomics


ACCEPTANCE

Distinct idle per slide; hands not blobs; slant shows straight to staggered with ASDF+F nub; associative A beat cycle; no infinite animation under reduced motion; pause/resume idle; consistent style; clear commercial licenses; copyright assignment on payment+acceptance (attribution exceptions only if kickoff-approved); passed kickoff, midway, final.


SKILLS

SVG illustration, CSS/UI animation, reduced-motion a11y, web SVG+CSS, instructional visuals


DELIVERABLES

1. 10 consistent SVGs (layered where needed)
2. Motion specs or CSS keyframes + classes
3. Previews of all idle loops + reduced-motion statics
4. License/IP packet (commercial use, assignment, open-source sources/URLs/licenses, attribution if any)

Bid with kickoff, midway, and final review in the timeline. We have the deck shell; we need art + motion quality.