Загрузка видео...

Не удалось загрузить видео

На главную

I wrote a technical demo article explaining how you can build a seamless interactive web experience using the GSAP animation library alongside other techs like WebGL and page transitions. The article is live on Codrops ↓

highpfloat's profile picture

chakib

2,957 subscribers

36,885 просмотров • 5 месяцев назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

Well… things escalated fast. This started as me re-purposing dusty / rejected Figma concepts to study page transitions using WebGL + Taxi. Somehow it turned into a mini site with… a lot going on. Live: #webflow #threejs #gsap #webgl
0:21

Well… things escalated fast. This started as me re-purposing dusty / rejected Figma concepts to study page transitions using WebGL + Taxi. Somehow it turned into a mini site with… a lot going on. Live: #webflow #threejs #gsap #webgl

Bimo Tri. P

13,587 просмотров • 6 месяцев назад

Interactive sunny-side pattern! 🍳 (a little tribute to my love for gooey shapes and dumb demos) Live demo & source code: Made with #webgl #shader and a bit of GSAP (GSAP) Hosted on CodePen.IO
0:21

Interactive sunny-side pattern! 🍳 (a little tribute to my love for gooey shapes and dumb demos) Live demo & source code: Made with #webgl #shader and a bit of GSAP (GSAP) Hosted on CodePen.IO

Ksenia Kondrashova

18,827 просмотров • 1 год назад

Multi-talented Filip ↟ shares an incredible article with us today: learn how he built a sci-fi-worthy 3D audio visualizer with Three.js, GSAP & Web Audio API — glowing shaders, draggable UI, and beats that shape the visuals in real time. 🎶🎧 👉
0:58

Multi-talented Filip ↟ shares an incredible article with us today: learn how he built a sci-fi-worthy 3D audio visualizer with Three.js, GSAP & Web Audio API — glowing shaders, draggable UI, and beats that shape the visuals in real time. 🎶🎧 👉

Codrops

15,391 просмотров • 1 год назад

I upgraded how the shadows look in the game, using a lesser-known technique called Light Space Perspective Shadow Maps. I also wrote a short article about using this technique on my blog!
2:31

I upgraded how the shadows look in the game, using a lesser-known technique called Light Space Perspective Shadow Maps. I also wrote a short article about using this technique on my blog!

Taha Torabpour

16,959 просмотров • 1 месяц назад

⚡️Live: A new project for #havaianas is finally live. An interactive landing page using #threejs and GSAP that shows how the most beloved flip flops in Brazil are created. Congrats to all the Neotix Transformação Digital team. Case study is here:
0:30

⚡️Live: A new project for #havaianas is finally live. An interactive landing page using #threejs and GSAP that shows how the most beloved flip flops in Brazil are created. Congrats to all the Neotix Transformação Digital team. Case study is here:

Anderson Mancini

11,525 просмотров • 3 лет назад

What if your website felt like a living canvas? 💣 I built a WebGL experiment to test that idea. A reactive image grid powered by Three.js + GSAP + Webflow , where every tile bends, scales and reacts to your cursor like a soft “force field”. 🔗 Live demo: 🔗 Case study on Contra #WebGL #ThreeJS #GSAP #CreativeCoding #Webflow #InteractionDesign
0:23

What if your website felt like a living canvas? 💣 I built a WebGL experiment to test that idea. A reactive image grid powered by Three.js + GSAP + Webflow , where every tile bends, scales and reacts to your cursor like a soft “force field”. 🔗 Live demo: 🔗 Case study on Contra #WebGL #ThreeJS #GSAP #CreativeCoding #Webflow #InteractionDesign

Franco Beltramella | Webflow Expert

15,710 просмотров • 7 месяцев назад

As promised, more insights on the webgl raytracer. It is based on this article/paper by Tero Karras: It uses Morton code to build a BVH binary radix tree on the GPU in realtime. #webgl #bvh #raytracing
0:35

As promised, more insights on the webgl raytracer. It is based on this article/paper by Tero Karras: It uses Morton code to build a BVH binary radix tree on the GPU in realtime. #webgl #bvh #raytracing

Nicolas Riciotti

43,994 просмотров • 3 лет назад

Claude can now create slides your next technical talk! I asked Claude to create a presentation based on an article I wrote a few years back that talks about the Web Storage APIs. In about 3 min I had a ready to go talk. (see the full deck in sub-tweet).
0:29

Claude can now create slides your next technical talk! I asked Claude to create a presentation based on an article I wrote a few years back that talks about the Web Storage APIs. In about 3 min I had a ready to go talk. (see the full deck in sub-tweet).

Ado

72,326 просмотров • 10 месяцев назад

I wrote an interactive article explaining the geometric intuition behind Rectified Flows. I visually explain why flow-models tend to learn curved trajectories, why this is bad for sampling latency, and a relatively simple technique for mitigating it. Check it out! Link 👇
0:25

I wrote an interactive article explaining the geometric intuition behind Rectified Flows. I visually explain why flow-models tend to learn curved trajectories, why this is bad for sampling latency, and a relatively simple technique for mitigating it. Check it out! Link 👇

Alec Helbling

158,894 просмотров • 5 месяцев назад

Seems like everyone's talking about database sharding. Earlier this year, I wrote an interactive guide on how it works for relational databases. Every engineer should know the core principles and challenges of sharding. This article is here to help.
0:20

Seems like everyone's talking about database sharding. Earlier this year, I wrote an interactive guide on how it works for relational databases. Every engineer should know the core principles and challenges of sharding. This article is here to help.

Ben Dicken

103,277 просмотров • 10 месяцев назад

Just SKETCH IT, and GROK will bring it into reality for you! Building a web page has never been easier! See below how you can build a web page from a drawing using Grok! 👇
1:07

Just SKETCH IT, and GROK will bring it into reality for you! Building a web page has never been easier! See below how you can build a web page from a drawing using Grok! 👇

Nima Owji

1,445,706 просмотров • 1 год назад

Hey everyone!! I made a new demo for a Codrops article made with #threejs, #blender3d, and #krita ! The article itself is about the increasing importance of psychological safety and self-awareness for creative work. I think as more and more people get super-talented/skilled the emphasis will shift to emotional safety rather than just technical skills. I think there's a ton of hidden talent out there that never shines because they're never provided safe environments to grow in. It's not a new concept by any means, but I'm an advocate for it. Article: Website: Code:
0:42

Hey everyone!! I made a new demo for a Codrops article made with #threejs, #blender3d, and #krita ! The article itself is about the increasing importance of psychological safety and self-awareness for creative work. I think as more and more people get super-talented/skilled the emphasis will shift to emotional safety rather than just technical skills. I think there's a ton of hidden talent out there that never shines because they're never provided safe environments to grow in. It's not a new concept by any means, but I'm an advocate for it. Article: Website: Code:

Andrew Woan

34,585 просмотров • 6 месяцев назад

To highlight the new v2 API integrations for x402, Ash built a demo app on Replit ⠕ showing how teams can build agents that can autonomously retrieve data from the web using a wallet with stablecoin payments. Watch the demo 👇
3:41

To highlight the new v2 API integrations for x402, Ash built a demo app on Replit ⠕ showing how teams can build agents that can autonomously retrieve data from the web using a wallet with stablecoin payments. Watch the demo 👇

Coinbase Developer Platform🛡️

16,290 просмотров • 9 месяцев назад

We just released our latest NanoGL experience! If you haven’t already, head over: The code is fully open source ( so you can see how we make interactive experiences at Makemepulse using our Webgl framework:
0:29

We just released our latest NanoGL experience! If you haven’t already, head over: The code is fully open source ( so you can see how we make interactive experiences at Makemepulse using our Webgl framework:

makemepulse

10,854 просмотров • 2 лет назад

I want to show you a demo of what I believe the future of user interaction to look like. This is ChatGPT controlling a live energy simulator (MCP App). I'll explain why today's architecture is clunky, and how WebMCP makes agent-driven UX much simpler. Read the article/watch 👇
0:47

I want to show you a demo of what I believe the future of user interaction to look like. This is ChatGPT controlling a live energy simulator (MCP App). I'll explain why today's architecture is clunky, and how WebMCP makes agent-driven UX much simpler. Read the article/watch 👇

Kent C. Dodds ⚡

27,852 просмотров • 4 месяцев назад

Sharding is the best way to scale a database. But how does it work? And what's the best way to ensure data and queries are evenly distributed? Our interactive article on database sharding teaches you how.
0:25

Sharding is the best way to scale a database. But how does it work? And what's the best way to ensure data and queries are evenly distributed? Our interactive article on database sharding teaches you how.

PlanetScale

28,639 просмотров • 2 месяцев назад

🚨BREAKING: You can now build full websites by just typing. It’s called Youware, and it runs on pure vibe coding. Here’s how it works (with a live demo):👇 1. Create a web page or game just by typing. You can even send a screenshot to make it live. 2. Use built-in tools like Figma, YouTube, and Notion. 3. Change a Figma design into a real website. 4. Change how the webpage looks with one click using the boost button on the profile page. 5. Easily deploy code with a link you can share. 6. Highlights: free online AI coding. Try it today:
0:23

🚨BREAKING: You can now build full websites by just typing. It’s called Youware, and it runs on pure vibe coding. Here’s how it works (with a live demo):👇 1. Create a web page or game just by typing. You can even send a screenshot to make it live. 2. Use built-in tools like Figma, YouTube, and Notion. 3. Change a Figma design into a real website. 4. Change how the webpage looks with one click using the boost button on the profile page. 5. Easily deploy code with a link you can share. 6. Highlights: free online AI coding. Try it today:

Hasan Toor

73,516 просмотров • 1 год назад

LISTEN TO THIS ARTICLE 🎧 Dear readers, we’ve made your experience even more comfortable: You can now listen to any article on our website — just tap “LISTEN TO THIS ARTICLE” and stay informed on the go.
0:39

LISTEN TO THIS ARTICLE 🎧 Dear readers, we’ve made your experience even more comfortable: You can now listen to any article on our website — just tap “LISTEN TO THIS ARTICLE” and stay informed on the go.

KyivPost

32,626 просмотров • 11 месяцев назад

A small video explaining the content of the below article.
4:26

A small video explaining the content of the below article.

rangarajan

14,798 просмотров • 1 год назад

Building Fullstack LangGraph AI agents can be a challenge. So I wrote a tutorial on how to build a Frontend for your LangGraph AI agent in minutes using: - @LangChainAI - CopilotKit🪁 - Tavily Here is the demo + checkout tutorial link below 👇
1:56

Building Fullstack LangGraph AI agents can be a challenge. So I wrote a tutorial on how to build a Frontend for your LangGraph AI agent in minutes using: - @LangChainAI - CopilotKit🪁 - Tavily Here is the demo + checkout tutorial link below 👇

Bonnie

23,999 просмотров • 1 год назад