SELF-INITIATED CONCEPT / MICHAEL L. LAWSON
FORM /
FUNCTION
Making creative engineering
something you can see—and explore.
An interactive kinetic sculpture that takes visitors from the underlying idea to the assembled object, then invites them to investigate its form, motion, and construction.
Launch the experience ↗- PROJECT TYPE
- Independent digital concept
- FOCUS
- Art direction, interaction & creative development
- TECHNOLOGY
- Three.js, TypeScript & Web Audio
01 / THE BRIEF
A different kind
of portfolio piece.
The goal was to create a Signature project that expands a portfolio of brand and product work into spatial interaction and cinematic storytelling.
The experience needed an original visual identity, a memorable object, and a reason to interact. A focused sculpture offered enough depth to demonstrate creative coding without requiring an entire virtual world.
Design question: how can an experience reveal the logic behind something beautiful?
Construction schematic / nested form, separated parts, independent axes. This is an explanatory drawing of the digital concept.
02 / THE VISUAL APPROACH
Precision,
with atmosphere.
An industrial editorial direction gives the sculpture a quiet setting: graphite, warm ivory, and restrained brass, with condensed headlines and monospace labels.
Three nested rings define the silhouette. Bearing forms and edge markings make the construction legible. Studio reflections reveal the metallic surfaces, while the faceted luminous core anchors the composition.
The approved Michael L. Lawson identity signs the work in the header. Its original colors and geometry remain intact, with the full SVG logo on desktop and the icon on narrow screens.
03 / THE EXPERIENCE
Introduce.
Then hand over.
- Imagine
A blueprint surface establishes the underlying structure and shared center.
- Construct
The rings separate into an exploded assembly. Eased motion makes the relationship between components easier to follow.
- Activate
The finished metal returns as the sculpture moves on independent axes.
The introduction lasts 18 seconds and starts on request. Visitors can pause, resume, or exit, then choose surface views, adjust assembly and speed, rotate the camera, and inspect component annotations.
Sound is optional. It adds a synthesized ambient layer rather than carrying information required to understand the piece.
04 / THE BUILD
Geometry
as a design tool.
The object is constructed directly in Three.js: torus rings, cylindrical bearings, a central axle, and an icosahedral core. This keeps the sculpture editable in code and avoids external model dependencies.
TypeScript coordinates the sequence, manual controls, and scene state. A shared animation loop drives the camera arc, ring rotations, and eased assembly. Changes in chapter update the HTML captions and controls alongside the scene.
Each ring’s 48 edge markings share an instanced mesh. Across the three rings, that replaces 144 individual marking meshes with three instanced meshes, reducing the draw submissions for those repeated details.
A generated studio environment supplies reflections. Pixel density is capped to limit rendering cost, and camera framing adapts to narrow viewports.
05 / ACCESS & CONTROL
Invite exploration.
Keep it approachable.
- Native buttons and range inputs support keyboard interaction.
- Dedicated camera buttons offer rotation and zoom without dragging; the focused canvas also accepts keyboard commands.
- Reduced-motion handling provides static chapter exploration and disables the cinematic sequence.
- A static SVG illustration appears if WebGL initialization fails or the rendering context is lost.
- Playback pauses when the page becomes hidden. Audio is suspended in the background.
- Captions sit in reserved space below the sculpture rather than competing with its silhouette.
06 / RESULT & REFLECTION
A working expression
of Creative Engineering.
The result is a locally reviewed interactive experience that combines spatial composition, animation, explanatory UI, and direct manipulation in one focused piece.
TypeScript and the production build pass. Local browser checks verified rendering, chapter selection, component annotations, playback controls, reset, and layouts without horizontal overflow at 375, 768, and 1440 pixels.
The sculpture is an artistic mechanism, not a validated physical machine. This self-initiated study has no client, commercial metrics, or user-research outcomes. Physical-device performance and broader browser testing remain release checks; reduced-motion and fallback handling were reviewed in code rather than simulated in this pass.
The central lesson: motion earns its place when it helps a visitor understand how a composition is put together.
Return to FORM / FUNCTION ↗