Particles, Pixels, and Purpose: Creative Frontend Beyond the Grid

Bookmark
Rate this content

A visual journey into the creative edge of frontend—blending shaders, Three.js, and storytelling to craft interactive experiences that move beyond the grid.

This talk has been presented at React Summit US 2025, check out the latest edition of this React Conference.

FAQ

Chris is a UX engineer who spent six and a half years at Google, where he was one of the first UX engineers. He helped make Google products feel more human through design systems like Material Design. He now runs his own studio, Torii, focusing on transforming front ends for startups and companies.

The purpose of Chris's talk is to connect creativity, code, and meaning, exploring why individuals become React developers and how they can find joy and purpose in their work.

Chris pursued a career in software engineering because of his early love for video games and the desire to create experiences that evoke emotions similar to those he felt from movies and games as a child. Despite initial academic challenges, he found joy in programming and overcame difficulties to succeed.

The golden ratio, approximately 1.618, is a mathematical proportion found in nature and art. Chris uses it to create visual experiences with 3js and React, demonstrating how math can be beautiful and integral to creating compelling digital interfaces.

Chris incorporates the golden ratio by using it to create spirals and patterns in his digital projects with 3js and React 3 Fiber. This approach reflects natural patterns and allows for efficient, visually pleasing designs.

Chris uses 3js and React 3 Fiber to create interactive visual experiences. These technologies allow him to transform complex shaders into reusable React components that can be easily integrated into projects.

React 3 Fiber allows Chris to integrate complex visual components into his projects with ease. It enables real-time interaction and makes it simple to create and manage 3D graphics within React applications.

Chris leaves his audience with the advice to find joy in the things they do and create, and to seek meaning in why they do it, quoting advice from Chris Do.

Chris sees math and art as interconnected in his work, using mathematical concepts like the golden ratio to inform and enhance the artistic aspects of his digital creations, resulting in visually compelling and meaningful experiences.

Chris enjoys working with frontend technology because it is where math meets art, design meets engineering, and curiosity turns into creation. It allows him to create engaging, interactive experiences that resonate with users.

Cristobal Chao
Cristobal Chao
19 min
21 Nov, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Chris introduces himself as a web developer with vast experience in UX engineering, emphasizing the importance of evoking emotions through interfaces. Childhood influences from anime, Disney, and video games shape career choices. Navigating dreams of soccer and software engineering, finding joy in challenges. Reflecting on 3js experiences and the significance of the golden ratio. Explaining Fibonacci sequence, GPU shaders, and natural patterns. Using React 3 Fiber to enhance particle playground. Celebrating creativity in frontend development as a fusion of engineering and creativity.
Video transcription and chapters available for users with access.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Embracing WebGPU and WebXR With Three.js
JSNation 2024JSNation 2024
27 min
Embracing WebGPU and WebXR With Three.js
Top Content
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.
Build a 3D Solar System with Hand Recognition and Three.js
JSNation 2022JSNation 2022
36 min
Build a 3D Solar System with Hand Recognition and Three.js
Top Content
This Talk explores the use of TypeScript, 3JS, hand recognition, and TensorFlow.js to create 3D experiences on the web. It covers topics such as rendering 3D objects, adding lights and objects, hand tracking, and creating interactive gestures. The speaker demonstrates how to build a cube and a bouncy box, move objects with flick gestures, and create a solar system with stars and planets. The Talk also discusses the possibilities of using hand gestures for web navigation and controlling websites, as well as the performance limits of these technologies.
Making “Bite-Sized” Web Games with GameSnacks
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Making “Bite-Sized” Web Games with GameSnacks
Top Content
Welcome to making bite-sized games with GameSnacks, a platform that focuses on optimizing game sizes for easy accessibility on the web. Techniques such as lazy loading, script placement, and code and art optimization can greatly improve game performance. Choosing the right file formats, reducing game size, and using game engines or custom tools are important considerations. Prioritizing file size, testing internet connections, and using testing tools for accurate simulation can help attract more users and improve game retention and reach.
Game Development with Threejs
JS GameDev Summit 2023JS GameDev Summit 2023
22 min
Game Development with Threejs
Hi there! I'm Anderson Mancini, a creative developer from Brazil. Let's dive into 3JS game development and how you can start your journey. React ThreeFiber offers a more organized and compact approach to building scenes using components. Explore exciting examples of what you can build with React ThreeFiber and 3JS. Learn the creative process of building a game using 3JS and recommended courses and learning resources. Performance tips for creating games with 3JS will be discussed in tomorrow's session.
Scaling React-Three-Fiber Applications beyond the Hello World
React Summit 2023React Summit 2023
20 min
Scaling React-Three-Fiber Applications beyond the Hello World
Watch video: Scaling React-Three-Fiber Applications beyond the Hello World
WebGL has evolved from showcasing technology to being used in everyday applications like Google Maps and Figma. React and 3.js can be used together to build WebGL applications, allowing for reusable components and declarative development. Building complex 3D graphics applications requires efficient data structures, algorithms, and rendering techniques. The Flux CAD editor uses React, 3.js, and React ReFiber to handle complex engineering documents and optimize GPU utilization. Optimizing the render loop and GPU performance is crucial for improving WebGL application performance. Instance rendering can be used to optimize text rendering in WebGL applications, achieving efficient rendering of thousands of 3D characters.
Creating Custom CAD Tools on the Web with ThreeJS
JS GameDev Summit 2023JS GameDev Summit 2023
8 min
Creating Custom CAD Tools on the Web with ThreeJS
Today we're going to be talking about creating custom CAD tools on the web with 3JS. We'll explore the reasons why you should make web-based tools, including their novice-friendly nature and their suitability for user-generated content. We'll learn how to create custom and parametric geometry using Three.js, set up geometry and material in Three.js, and improve visibility by adding normals to the geometry.