Taobao Design Official Website

Transforming the Manifesto into an Interactive Narrative Journey

Taobao Design is guided by five core values: Human-Centered, Freedom, Academia, Creativity, and Technology. Each value is translated into a symbolic visual language and merged with the TAO brand mark. Through a series of interactive moments, users actively uncover and experience these values, transforming the manifesto from static content into an engaging narrative journey.

1. Human-centered → feel human warmth → thermal imaging TAO → front camera captures, heatmap flows with user movement
2. Freedom → feel randomness in creative expression → ink TAO → blow into microphone, ink spreads freely
3. Academia → feel exploratory nature of research → node ruler TAO → click or drag to freely connect/disconnect ruler
4. Creativity → feel generative creativity → brush TAO → select brush for freeform drawing

1. Based on metaball algorithms and coordinate mapping techniques, a thermal imaging effect is implemented on the canvas. The heat field flows dynamically following human movement.
2. Using ml5.js, real-time detection of human body key points (head, chest, and both hands) is performed, and these positions are mapped to drive the movement of the thermal field.
3. A set of adjustable parameters, aoe, power, distance, and cutoff, are used to control the size of metaballs, interaction range, heat intensity, and the outer diffusion boundary. These controls allow fine-tuning of the final visual shape.
4. The thermal field is rendered with five-layer gradient colors from inner to outer, which can be freely adjusted to create different visual styles and atmospheric effects.

1. Using Three.js combined with custom GLSL fragment shaders for ink-style rendering, and SDF-based physics simulation to create ink stretching and trailing effects when blown.
2. A free, randomized ink effect driven by microphone volume and airflow direction.

1. Built a modular ruler system as a standalone React component, powered by PixiJS for real-time Canvas/WebGL interactions. Enabled intuitive manipulation such as dragging and rotating via pointer events, supported by geometric computation and state-machine logic for precise node snapping and structural attachment.
2. Developed a set of ruler modules in different sizes and forms, allowing users to freely disassemble and recombine them into flexible geometric structures through a unified interaction rule system.

1. Built a browser-based drawing system using native HTML5 Canvas 2D and Pointer Events. Designed and implemented four custom brushes—including a pressure-responsive pen, texture-based crayon, pixel-stamp brush, and marker brush—while providing real-time controls for brush size, color selection, and erasing.
2. Developed four unique rendering behaviors to emulate different drawing media, ranging from expressive pressure-driven ink lines to textured crayon marks, pixel-art strokes, and clean marker illustrations.

AI-Driven Design Engineering Practice

Documented the concepts and requirements of the four interactive experiences in Markdown, using LLMs to explore technical solutions and implementation approaches. Built each interaction as an independent project, iterating through AI-assisted prototyping, testing, and refinement to achieve the desired visual and interaction outcomes. Packaged reusable components, optimized rendering performance, and delivered production-ready code and documentation for deployment.