Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Learn how we built our interactive 3D badge for Vercel Ship with React Three Fiber.

vercel's profile picture

Vercel

430,190 subscribers

274,679 görüntüleme • 2 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

🧵How I made this interactive 3D scene with Blender and react-three-fiber
0:16

🧵How I made this interactive 3D scene with Blender and react-three-fiber

yasmin

145,085 görüntüleme • 2 yıl önce

The hero on the latest Shopify Editions page was all built with React Three Fiber. Here’s how we did it 👇
0:16

The hero on the latest Shopify Editions page was all built with React Three Fiber. Here’s how we did it 👇

Daniel Beauchamp

53,894 görüntüleme • 1 yıl önce

Card transition experiment with React Three Fiber + html-in-canvas. Try it here: Needs Chrome Canary for the interactive cards.
0:18

Card transition experiment with React Three Fiber + html-in-canvas. Try it here: Needs Chrome Canary for the interactive cards.

Zsolt Kacso

33,344 görüntüleme • 1 ay önce

Interactive 3d explorer with React Three Fiber. Worked with an artist to fix the topology and reduce the size of the CAD model. Custom LUT to more closely match the colour grade of the renders.
0:13

Interactive 3d explorer with React Three Fiber. Worked with an artist to fix the topology and reduce the size of the CAD model. Custom LUT to more closely match the colour grade of the renders.

Ben Leonard

12,314 görüntüleme • 2 ay önce

The Vercel Ship 2025 keynote starts in one hour. Hear from Guillermo Rauch, Lee Robinson, Tom Occhino, and more. Watch live on
0:18

The Vercel Ship 2025 keynote starts in one hour. Hear from Guillermo Rauch, Lee Robinson, Tom Occhino, and more. Watch live on

Vercel

20,380 görüntüleme • 11 ay önce

With Geist at its core, our updated logo is a refined, minimalist representation of our brand identity.
0:12

With Geist at its core, our updated logo is a refined, minimalist representation of our brand identity.

Vercel

249,658 görüntüleme • 1 yıl önce

The world is fractured by wealth- a 3D fragile map of our divided world. 3D holographic globe that visualizes global economic inequality using the Gini Index data from World Bank. Spin the globe. Zoom in on any country. Built as a creative rendition of our economic ecosystem - beautiful, yet broken. #DataVisualization #ThreeJS #React #CreativeCoding #Geospatial #WebGL Three.js React-three-fiber
0:13

The world is fractured by wealth- a 3D fragile map of our divided world. 3D holographic globe that visualizes global economic inequality using the Gini Index data from World Bank. Spin the globe. Zoom in on any country. Built as a creative rendition of our economic ecosystem - beautiful, yet broken. #DataVisualization #ThreeJS #React #CreativeCoding #Geospatial #WebGL Three.js React-three-fiber

SHAHNAB AHMED

14,527 görüntüleme • 2 ay önce

React Native WebGPU 🤝 Three Fiber
0:17

React Native WebGPU 🤝 Three Fiber

William Candillon

37,636 görüntüleme • 1 yıl önce

📣 We are bringing WebGPU to React Native! This update enables: 🚀 Modern GPU APIs (Vulkan & Metal) and enables general purpose GPU computation for AI/ML 🐎 Seamless Reanimated integration 🧊 Bringing stunning 3d experiences to React Native using ThreeJS and React Three Fiber
0:15

📣 We are bringing WebGPU to React Native! This update enables: 🚀 Modern GPU APIs (Vulkan & Metal) and enables general purpose GPU computation for AI/ML 🐎 Seamless Reanimated integration 🧊 Bringing stunning 3d experiences to React Native using ThreeJS and React Three Fiber

Mustafa Ali

262,567 görüntüleme • 1 yıl önce

Still one of my fav projects I worked on in the day job – an interactive experience showing low-carbon technology for the home Custom 3D models created in Blender 🔶 and everything is rendered in the browser using Three.js and the awesome react-three-fiber
0:18

Still one of my fav projects I worked on in the day job – an interactive experience showing low-carbon technology for the home Custom 3D models created in Blender 🔶 and everything is rendered in the browser using Three.js and the awesome react-three-fiber

Robin Hawkes

26,525 görüntüleme • 3 yıl önce

Learn how LLMs work under the hood! This is the best interactive website to learn how LLMs work. It combines clear, step-by-step explanations with dynamic 3D visualizations for an intuitive learning experience.
0:12

Learn how LLMs work under the hood! This is the best interactive website to learn how LLMs work. It combines clear, step-by-step explanations with dynamic 3D visualizations for an intuitive learning experience.

Sumanth

113,009 görüntüleme • 1 yıl önce

New Astro + View Transitions demo ✨ This time using React Three Fiber to render an animated 3D model that persists across page-navigations.
0:18

New Astro + View Transitions demo ✨ This time using React Three Fiber to render an animated 3D model that persists across page-navigations.

Maxi Ferreira

125,776 görüntüleme • 2 yıl önce

Vercel Domains just got a full rebuild: • Search without logging in • Instant, streaming search results • At-cost pricing (up to 50% lower) • Private search, with no logging • Support for 500+ TLDs • Multi-domain checkout Try it now at
0:14

Vercel Domains just got a full rebuild: • Search without logging in • Instant, streaming search results • At-cost pricing (up to 50% lower) • Private search, with no logging • Support for 500+ TLDs • Multi-domain checkout Try it now at

Vercel

923,565 görüntüleme • 8 ay önce

Transparent Globe Project- It’s finally complete! 10 unique interactive 3D globes, each visualizing a completely different global dataset in real time. From river flows and seismic activity to population density, global inequality, satellite constellations, and even Sonic Nomad roaming the planet with live music. Every globe is transparent, responsive, and built from scratch to feel alive. #CreativeCoding Three.js React-three-fiber #DataVisualization #WebGL #GenerativeArt #BuildInPublic
0:17

Transparent Globe Project- It’s finally complete! 10 unique interactive 3D globes, each visualizing a completely different global dataset in real time. From river flows and seismic activity to population density, global inequality, satellite constellations, and even Sonic Nomad roaming the planet with live music. Every globe is transparent, responsive, and built from scratch to feel alive. #CreativeCoding Three.js React-three-fiber #DataVisualization #WebGL #GenerativeArt #BuildInPublic

SHAHNAB AHMED

37,600 görüntüleme • 2 ay önce

Claude Sonnet 4.5 is now live on Vercel AI Cloud: • Improved v0, Vercel Agent, and more • Available on AI Gateway + AI SDK • New open source Coding Agent Platform
0:10

Claude Sonnet 4.5 is now live on Vercel AI Cloud: • Improved v0, Vercel Agent, and more • Available on AI Gateway + AI SDK • New open source Coding Agent Platform

Vercel

175,414 görüntüleme • 8 ay önce

Start your 3D engines 🏎️ Learn how to build a 3D racing experience in less than an hour in Unity Studio, our web-based editor designed for industries like manufacturing, automotive, healthcare, architecture, and more. Join us live on June 3, 2026, at 9:00 AM PDT / 12:00 PM EDT to follow along step-by-step with Unity experts as we take pre-built assets and turn them into an interactive racing environment. You’ll learn how to: 🏎️ Build and customize interactive 3D scenes 💡 Add lighting, materials, and interactions quickly 🛠️ Assemble and iterate using Studio workflows 🎉 Publish and share your experience Register here:
0:15

Start your 3D engines 🏎️ Learn how to build a 3D racing experience in less than an hour in Unity Studio, our web-based editor designed for industries like manufacturing, automotive, healthcare, architecture, and more. Join us live on June 3, 2026, at 9:00 AM PDT / 12:00 PM EDT to follow along step-by-step with Unity experts as we take pre-built assets and turn them into an interactive racing environment. You’ll learn how to: 🏎️ Build and customize interactive 3D scenes 💡 Add lighting, materials, and interactions quickly 🛠️ Assemble and iterate using Studio workflows 🎉 Publish and share your experience Register here:

Unity

34,004 görüntüleme • 19 gün önce

✧ Vercel Navbar Made with Tailwind and Motion React.
0:17

✧ Vercel Navbar Made with Tailwind and Motion React.

LN

43,097 görüntüleme • 1 yıl önce

This is such a cool interactive website to learn how LLMs work. It’s combines step-by-step text explanations with dynamic 3D visualizations for an immersive learning experience. Available to everyone for free!
0:12

This is such a cool interactive website to learn how LLMs work. It’s combines step-by-step text explanations with dynamic 3D visualizations for an immersive learning experience. Available to everyone for free!

Alvaro Cintas

305,363 görüntüleme • 1 yıl önce

When we say “ship it”, we mean it. Our Day Zero Stack is back with a new wave of partners and more exclusive discounts on the tools founders love most. Ship faster, hire smarter, and build with AI from day one with our partners deel, Drata, Granola, Linear, Gabriella Warp, Wispr Flow, Attio, and Vercel
0:19

When we say “ship it”, we mean it. Our Day Zero Stack is back with a new wave of partners and more exclusive discounts on the tools founders love most. Ship faster, hire smarter, and build with AI from day one with our partners deel, Drata, Granola, Linear, Gabriella Warp, Wispr Flow, Attio, and Vercel

Brex

37,566 görüntüleme • 4 ay önce