(Motion Designer) Real-Time 3D Brand Cube System

Required Skills
WebGL
Three.js
GLSL
TypeScript
gitf/glb
edge-emissive lines, bloom/post
Draco
ktx2
meshopt
Adobe After Effects
bodymovin/lottie
motion design and easing
svg/png/mp4/gif
Optimization
performance profiling (60 fps, bundle budget)
Accessibility
prefers-reduced-motion, contrast
building tool
Vite
Webpack
node scripts
cross browser QA
Figma
Job Description
Project Description:
Build a real-time brand cube system per spec: diamond-tilted 3D cube with two hero motions—Orange Border Run (loopable edge-emissive current) and 2×2 Juggle (state-change shuffle)—plus reduced-motion fallback. Deliver WebGL/Three component (shader-driven), Lottie exports for marketing, and asset pack (SVG/PNG/MP4/GIF/ICO) with defined timings, easing, glow, triggers, accessibility, and performance budgets.

Must-Have Skills:

Three.js/WebGL, strong GLSL (edge emissive, bloom/post, screen-space stroke).
Motion design systems; translating timing/easing specs to code.
Lottie/Bodymovin pipeline; After Effects for motion comps.
Asset production: SVG hygiene, PNG/MP4/GIF optimization, favicon/app icon sets.
Performance: frame budgeting, bundle sizing, shader profiling.
Accessibility: prefers-reduced-motion, contrast practices.
Tooling: TypeScript, modern build (Vite/Webpack), Node-based export scripts.
Versioned deliverables & naming conventions; cross-browser QA.
Nice-to-Haves:

GPU post effects (bloom/blur variants), MSAA tradeoffs.
Figma component handoff discipline.
Rubik-style rigging/instancing for the 2×2 juggle.
Recommended Hire Level (per me):
Senior/Lead Brand Motion Engineer (WebGL/Shader) — 6–10+ yrs.
One person who owns shader-level implementation + motion pipeline end-to-end. If splitting, pair a Senior WebGL/Shader Engineer with a Senior Motion Designer (AE/Lottie).