Partículas, Píxeles y Propósito: Creatividad en el Frontend Más Allá de la Cuadrícula

Bookmark
Rate this content

Un viaje visual hacia el borde creativo del frontend—combinando shaders, Three.js y narración para crear experiencias interactivas que van más allá de la cuadrícula.

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

Cristobal Chao
Cristobal Chao
19 min
21 Nov, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Chris se presenta como un desarrollador web con vasta experiencia en ingeniería UX, enfatizando la importancia de evocar emociones a través de interfaces. Influencias de la infancia de anime, Disney y videojuegos moldean las elecciones de carrera. Navegando sueños de fútbol e ingeniería de software, encontrando alegría en los desafíos. Reflexionando sobre experiencias con 3js y la importancia de la proporción áurea. Explicando la secuencia de Fibonacci, shaders de GPU y patrones naturales. Usando React 3 Fiber para mejorar el patio de partículas. Celebrando la creatividad en el desarrollo frontend como una fusión de ingeniería y creatividad.
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.
Construye un Sistema Solar 3D con Reconocimiento de Manos y Three.js
JSNation 2022JSNation 2022
36 min
Construye un Sistema Solar 3D con Reconocimiento de Manos y 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.
Haciendo juegos web “de tamaño bocado” con GameSnacks
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Haciendo juegos web “de tamaño bocado” con 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.
Desarrollo de juegos con Threejs
JS GameDev Summit 2023JS GameDev Summit 2023
22 min
Desarrollo de juegos con 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.
Escalando aplicaciones React-Three-Fiber más allá del Hola Mundo
React Summit 2023React Summit 2023
20 min
Escalando aplicaciones React-Three-Fiber más allá del Hola Mundo
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.
Creando herramientas CAD personalizadas en la web con ThreeJS
JS GameDev Summit 2023JS GameDev Summit 2023
8 min
Creando herramientas CAD personalizadas en la web con 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.