Motion Playground

KOJI-KA.COM / SHONEN-BMOTION PLAYGROUND
10 FRAMES
CODEX HANDOFF READY
00OVERVIEW01LOADING02HERO03COLOR04WORKS HOVER05FILTER SCAN06PROJECT DETAIL07CONTACT08TRANSITION09TOKENS
00MOTION OVERVIEW
INDEX · 9 ANIMATIONS DEFINED
#ANIMATION NAMEDURATIONEASINGTRIGGERPAGE
01PRE-FLIGHT ARCHIVE1000–1400mslinear / ease-outPage LoadAll
02HERO STAGGER REVEAL450–700msease-outLoad + 80ms staggerHome
03COLOR SCAN REVEAL350–500msease-in-outHoverHome / Works
04CARD ACTIVATE220–320msease-outHoverWorks
05FILTER SCAN500–700mslinear + stagger 60msClickWorks
06PROJECT RECORD OPEN700–900mscubic-bezier(0.22,1,0.36,1)Page LoadProject
07TERMINAL TRANSMIT900–1200mslinearFocus / SubmitContact
08HARD SCAN WIPE500–700msease-in-outNavigationAll
09MOTION TOKENS120–600msvariousReferenceAll
DOCUMENT: MOTION PLAYGROUND · KOJI-KA.COM · SHONEN-B · FOR CODEX HANDOFF
01LOADING / SYSTEM CHECK
STATIC PREVIEW · INTERACTIVE
KOJI-KA.COMPRE-FLIGHT ARCHIVE
LOADING000
ARCHIVE INDEX· ···
TYPE SYSTEM· ···
RENDER ENGINE· ···
MOTION SPECAnimation NamePRE-FLIGHT ARCHIVE
Duration1000–1400ms (full sequence)
Delay0ms start · 300ms between counter steps
Easinglinear (progress bar, scanline) · ease-out (reveal)
TriggerPage Load / DOMContentLoaded
PageAll (global loader overlay)
ImplementationCounter jumps 0→34→67→100 via JS. CSS animation for scanline travel. Fade-up for SYSTEM CHECK COMPLETE.
PerformanceCSS scanline. JS only for counter. Reduced motion: skip scanline + counter, jump to 100 instantly.
LAYER NAMES · CODEXmotion/loading/system-checkmotion/loading/progress-barmotion/loading/scanlinemotion/loading/complete-labelmotion/loading/ui-reveal
02HERO REVEAL
STATIC PREVIEW · INTERACTIVE
STATUS / ACTIVE
LOCATION · TOKYO, JP
ONLINE / AVAILABLE
SHONEN-B
GRAPHIC & WEB DESIGNER
↓  SCROLL TO EXPLORE
STAGGER 80ms · 6 ELEMENTS
MOTION SPECAnimation NameHERO STAGGER REVEAL
Duration450ms (labels) · 700ms (title line)
DelayStagger 80ms per line. Title at 280ms.
Easingease-out
Propertiesopacity 0→1 · translateY 6px→0 · letter-spacing collapses inward
TriggerPage Load — after system check resolves
PageHome (/)
ImplementationCSS animation-delay per element. will-change: opacity, transform. Title line gets longer duration.
PerformanceNo layout thrash. Compositor-only properties. Avoid animating font-size.
LAYER NAMES · CODEXmotion/hero/statusmotion/hero/locationmotion/hero/availablemotion/hero/titlemotion/hero/subtitlemotion/hero/cta
03COLOR REVEAL
STATIC PREVIEW · INTERACTIVE
HOVER TO REVEAL COLOR
MECHANISM01ENTER → 80ms RGB glitch accent
02clip-path scans L → R · 450ms
03Color layer fully visible
04LEAVE → clip-path reverses · 320ms
05Line art restored
GLITCH · STANDBY
MOTION SPECAnimation NameLINE-ART COLOR SCAN
Duration450ms (reveal) · 320ms (exit)
Delay0ms
Easingease-in-out
Propertiesclip-path: inset(0 100%→0% 0 0). Brief RGB glitch offset on enter (~80ms).
TriggerHover Enter / Leave on artwork
PageHome · Works
ImplementationColor layer sits above line-art with clip-path mask. Glitch uses CSS @keyframes with clip-path slicing. Return reverses clip direction.
Performanceclip-path is compositor-friendly. Do not animate background-color or filter on large areas.
LAYER NAMES · CODEXmotion/color-reveal/line-artmotion/color-reveal/color-layermotion/color-reveal/rgb-offset-rmotion/color-reveal/rgb-offset-b
04WORKS RAIL HOVER
STATIC PREVIEW · INTERACTIVE
001
ARCHIVE SYSTEM
WEBIDENTITY
VIEW PROJECT →
002
TYPOGRAPHIC STUDY
PRINTTYPE
VIEW PROJECT →
003
MOTION DIRECTION
WEBMOTION
VIEW PROJECT →
MOTION SPECAnimation NameCARD ACTIVATE
Duration220ms (border, label, index) · 320ms (image scale)
Delay0ms
Easingease-out
PropertiesImage scale 1→1.04 · VIEW PROJECT opacity 0→1 · Non-hovered cards dim to 0.35
TriggerHover Enter / Leave on project card
PageWorks (/works)
ImplementationNon-active cards dim with opacity transition. Active card gets border-strong. Annotation line uses clip-path reveal on enter.
PerformanceUse transform: scale(), not width/height. Only compositor-safe properties.
LAYER NAMES · CODEXmotion/works/card-defaultmotion/works/card-activemotion/works/card-imagemotion/works/card-labelmotion/works/card-index
05WORKS FILTER SCAN
STATIC PREVIEW · INTERACTIVE
01ARCHIVE SYSTEM
WEBIDENTITY
02TYPOGRAPHIC STUDY
PRINT
03MOTION DIRECTION
WEBMOTION
04BRAND SYSTEM 03
IDENTITYPRINT
05INTERFACE ARCHIVE
WEB
06EDITORIAL WORK
PRINTMOTION
MOTION SPECAnimation NameFILTER SCAN REVEAL
Duration620ms (scanline + list dim) · stagger 60ms per item
DelayItems appear after scanline completes
Easinglinear (scanline) · ease-out (item reveal)
PropertiesList fades to 0. Scanline travels top→bottom. Items stagger back in with fade-up.
TriggerFilter Button Click
PageWorks (/works)
ImplementationIf filter returns 0 items, show NO RECORDS FOUND label. Scanline is decorative — not semantic. Do not use ARIA-live for scanline.
PerformanceCSS for scanline. Avoid re-mounting list items. Toggle opacity/transform only.
LAYER NAMES · CODEXmotion/filter/scan-linemotion/filter/list-dimmotion/filter/item-reveal
06PROJECT DETAIL REVEAL
STATIC PREVIEW · INTERACTIVE
PROJECT RECORD003 / 012
motion/project/image-mask
CLIENTKOJI-KA ARCHIVE
YEAR2024
SCOPEWEB · MOTION · IDENTITY
FORMATRESPONSIVE · FULL-BLEED
SUMMARYArchive system and motion direction for graphic and web practice. Monochrome visual language with precise typographic control.
NEXT PROJECT →
MOTION SPECAnimation NamePROJECT RECORD OPEN
Duration800ms (image clip) · 700ms (data fields) · 900ms (summary)
DelayImage first. DATA fields +200ms, stagger 80ms each. Summary +500ms.
Easingcubic-bezier(0.22, 1, 0.36, 1) — long ease-out tail
PropertiesImage: clip-path inset(0 100%→0% 0 0). Labels + values: opacity + translateY 6px→0. Summary: fade-up.
TriggerPage Load on /works/:id route
PageProject Detail (/works/:id)
ImplementationSequence via JS timeout chain or Framer Motion orchestration. Next Project link appears last (phase 3).
Performanceclip-path on image is compositor-only. will-change: clip-path sparingly. No layout shifts during reveal.
LAYER NAMES · CODEXmotion/project/record-headermotion/project/image-maskmotion/project/data-labelmotion/project/data-valuemotion/project/summarymotion/project/next-project
07CONTACT TERMINAL MOTION
STATIC PREVIEW · INTERACTIVE
CONTACT / SEND MESSAGE
MESSAGEENTER MESSAGE
CLICK INPUT → CURSOR APPEARS (CSS blink animation)
MOTION SPECAnimation NameTERMINAL TRANSMIT
Duration900–1100ms (transmit progress) · 280ms (sent reveal)
Delay0ms
Easinglinear (progress bar) · ease-out (state label transitions)
PropertiesFocus → blinking cursor (CSS animation). Submit → TRANSMITTING label + progress 0→100 + MESSAGE SENT fade-up.
TriggerInput Focus (cursor) · Form Submit (transmit sequence)
PageContact (/contact)
ImplementationCursor blinks via CSS @keyframes step-end. Progress via JS setInterval. On success, form dims and MESSAGE SENT reveals with fade-up-in.
PerformanceCSS handles cursor. JS only for progress counter. Do not animate element height. Reduced motion: remove blink, jump to sent.
LAYER NAMES · CODEXmotion/contact/input-focusmotion/contact/cursor-blinkmotion/contact/transmit-labelmotion/contact/progress-barmotion/contact/sent-label
08PAGE TRANSITION
STATIC PREVIEW · INTERACTIVE
CURRENT VIEWPAGE  A
SIMULATES ROUTE CHANGE
MOTION SPECAnimation NameHARD SCAN WIPE
Duration600ms total · 300ms wipe-in · 300ms hold · 300ms wipe-out
Delay0ms
Easingease-in-out
PropertiesFull-viewport panel translates in from left (translateX -101%→0), holds, then exits right (0→101%). Content swaps mid-hold.
TriggerNavigation Link Click (router.push / Next.js Link)
PageAll — global transition layer (position: fixed)
ImplementationPanel is position:fixed, z-index:9999. Content swap on transitionend of in-phase. Background of panel matches page background. Add scanline texture to wipe panel.
PerformanceTransform only — never animate left/right position. Avoid on mobile if prefers-reduced-motion is set.
LAYER NAMES · CODEXmotion/page-transition/scan-wipemotion/page-transition/content-outmotion/page-transition/content-in
09MOTION TOKENS / SPECS
IMPLEMENTATION REFERENCE · CODEX
CSS CUSTOM PROPERTIESTOKEN NAMEVALUEEASINGUSE CASE
--motion-fast-scan120mslinearScanlines, cursor, immediate response
--motion-micro-hover180msease-outBorder color, label, icon shift
--motion-panel-reveal320mscubic-bezier(0.22,1,0.36,1)Panel, drawer, card expand
--motion-color-reveal350–500msease-in-outColor layer clip-path scan
--motion-hero-reveal450–700msease-outHero text stagger entrance
--motion-detail-reveal700–900mscubic-bezier(0.22,1,0.36,1)Project detail image + fields
--motion-load-sequence1000–1400mslinearSystem check, progress counter
--motion-page-transition600msease-in-outFull page scan wipe
--motion-stagger60ms—Delay multiplier per item
USAGE EXAMPLE.card {
  transition:
    opacity var(--motion-micro-hover) ease-out,
    transform var(--motion-panel-reveal) cubic-bezier(0.22,1,0.36,1);
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: opacity 200ms ease-out; }
}
REDUCED MOTION RULES@media (prefers-reduced-motion: reduce)· Remove all scan wipe animations (scan-wipe, scanline-travel)
· Remove all glitch effects (@keyframes glitch)
· Remove clip-path reveals — use opacity only
· Remove parallax / Y-translate reveals
· Retain opacity transitions, max 200ms
· Blinking cursor: static — no animation
· Progress bars: jump to 100 directly
· Use prefers-reduced-motion in CSS + useReducedMotion() hook
GLITCH USAGE RULES· Use only as short accent (< 280ms)
· Max 1× per user interaction
· Never loop or persist
· clip-path slicing only — no translate X > 4px
· Remove entirely under reduced-motion
KOJI-KA.COM / SHONEN-B — MOTION SPECIFICATION DOCUMENTFOR CODEX HANDOFF · NOT FOR DISTRIBUTION