Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

Little weekend prototype: iMessage style card stack. Always love a good reason to dive into Origami and work through visual + interactive puzzles like this. Here’s a bit about how I built it and a link to download ↓

Nate Smith

1,105 subscribers

166,430 Aufrufe • vor 2 Jahren •via X (Twitter)

Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Nate Smith

Nate Smithvor 2 Jahren

The interactive layer and the visual layer are decoupled. There’s an invisible carousel of cards that you’re actually scrolling through. The visible stack of cards is entirely separate, animating independently based on scroll position.

Profilbild von Nate Smith

Nate Smithvor 2 Jahren

In early versions, I focused on the transition from card 0 → 1. I could just “hard code” the transitioning values. This was an important step to figure out which properties to animate. You just couldn’t scroll past card 1 😅

Profilbild von Nate Smith

Nate Smithvor 2 Jahren

When scrolling back from card 1 → 0, it just reversed the 0 → 1 animation. This made it feel like you’re grabbing a card behind the stack, pulling it to the front. What we really want is for it to feel like you’re always grabbing the front card and flicking it to either side.

Profilbild von Nate Smith

Nate Smithvor 2 Jahren

So with all this, the real challenge was to figure out the dynamic logic needed to make this flexible and reusable. For this, I started to focus on the animations for card 2 instead of card 0.

Profilbild von Nate Smith

Nate Smithvor 2 Jahren

All the logic is based on a progress value. When progress=0, card 0 is in the front; when progress=1, card 1 is in the front, etc. If we subtract the current progress from each card’s index, we get the distanceFromFront. We can use this to animate things like z-rotation.

Profilbild von Nate Smith

Nate Smithvor 2 Jahren

Some things were more complicated. The toughest part was handling the animations of the front card and its 2 adjacent cards. As the distanceFromFront value goes from 1 to 0 to -1 to 0 to 1, we can perform a few functions to make it feel like you’re always grabbing the front card.

Profilbild von Nate Smith

Nate Smithvor 2 Jahren

That’s pretty much it! Here it is with some photos from our recent trip to Japan. Satisfying to play with, super fun to build. If you wanna dive deeper, can download the file here:

Profilbild von Nate Smith

Nate Smithvor 2 Jahren

Next, I’d like to replicate this in web with native CSS scroll snapping. It’d be amazing to also use CSS scroll-driven animations, but I’m not sure it would support this level of decoupling just yet (CC @bramus, @jh3yy 👀). Will play with a JavaScript solution for now..

Profilbild von Nate Smith

Nate Smithvor 2 Jahren

I also wanna call out @RoberaGeleta and @daniel__designs for their takes on this interaction. Loved what Robera did with the y-rotation to fix the z-index jump.

Profilbild von Nate Smith

Nate Smithvor 2 Jahren

made it so that you can drag in any direction. I’m sure this feels amazing, esp on a touchscreen. I pursued the decoupled carousel to figure out the logic needed for a native scroll gesture, e.g. trackpad swipe. We should compare notes!

Ähnliche Videos

My interactive stream layout. It has minigames, puzzles, secrets to unlock, special story audio and we add to it regularly when I stream. Any support to share this around would mean a lot. I've put so much work into making it such a fun little place. #pngtuber

My interactive stream layout. It has minigames, puzzles, secrets to unlock, special story audio and we add to it regularly when I stream. Any support to share this around would mean a lot. I've put so much work into making it such a fun little place. #pngtuber

Binny Bun - Commissions open

48,888 Aufrufe • vor 1 Jahr

Here’s how Gemini 2.5 Flash-Lite built a research prototype that can instantly transform large PDF files into interactive web apps - making it easier to summarize and understand dense information. 📄 Try it now in Google AI Studio →

Here’s how Gemini 2.5 Flash-Lite built a research prototype that can instantly transform large PDF files into interactive web apps - making it easier to summarize and understand dense information. 📄 Try it now in Google AI Studio →

Google DeepMind

25,435 Aufrufe • vor 1 Jahr

A little while ago I visited a homebuilding factory in Ottawa called Caivan. Here's a little bit about their work, and how they're able to build so quickly.

A little while ago I visited a homebuilding factory in Ottawa called Caivan. Here's a little bit about their work, and how they're able to build so quickly.

Sean Fraser

48,835 Aufrufe • vor 2 Jahren

“This album it’s a little bit like manic it’s a little bit like if I can’t have love I want power, but it feels the most to me like Badlands”

“This album it’s a little bit like manic it’s a little bit like if I can’t have love I want power, but it feels the most to me like Badlands”

Z is a sad girl in love

307,333 Aufrufe • vor 1 Jahr

There's a good reason for the references, and I really like them (and this episode), as it feels like a love letter to SpongeBob. I do agree the animation could be better, but who really gaf about Squidward torture?

There's a good reason for the references, and I really like them (and this episode), as it feels like a love letter to SpongeBob. I do agree the animation could be better, but who really gaf about Squidward torture?

NaughtyNauticalJay

26,416 Aufrufe • vor 19 Tagen

last weekend pierre [dot] co went down for a bit – this felt bad. But also a good time to add git blame?? And then i made a dumb video about it.

last weekend pierre [dot] co went down for a bit – this felt bad. But also a good time to add git blame?? And then i made a dumb video about it.

Jacob

11,096 Aufrufe • vor 1 Jahr

Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.

Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.

Steve (Builder.io)

122,483 Aufrufe • vor 18 Tagen

I just built a chicken waterer that doesn’t freeze and is always clean. Here’s how it works.

I just built a chicken waterer that doesn’t freeze and is always clean. Here’s how it works.

Justin Rhodes

10,922 Aufrufe • vor 4 Monaten

Here’s a little bit of Moonjoy for you on this Sunday afternoon! Nothing quite like elevating humanity through a shared love of space.

Here’s a little bit of Moonjoy for you on this Sunday afternoon! Nothing quite like elevating humanity through a shared love of space.

Andrew McCarthy

33,399 Aufrufe • vor 20 Tagen

It was great to join FOX & Friends to share a little bit about what I love about Brandon

It was great to join FOX & Friends to share a little bit about what I love about Brandon

Danielle Gill

81,804 Aufrufe • vor 2 Monaten

#SaudiArabianGP | Lewis Hamilton: “My focus this weekend is driving style. Really getting on top of the circuit, getting into the rhythm… This is a circuit, a bit like Monaco, you have to get into the rhythm as early as possible, and just making incremental gain from there and not be over driving.” “I’ve got a lot of work to do to adapt the way that I approach corners but it’s not impossible. Might just take a little bit of time but hopefully not too long.”

#SaudiArabianGP | Lewis Hamilton: “My focus this weekend is driving style. Really getting on top of the circuit, getting into the rhythm… This is a circuit, a bit like Monaco, you have to get into the rhythm as early as possible, and just making incremental gain from there and not be over driving.” “I’ve got a lot of work to do to adapt the way that I approach corners but it’s not impossible. Might just take a little bit of time but hopefully not too long.”

deni

25,581 Aufrufe • vor 1 Jahr

Magnus Carlsen tells Joe Rogan about how he treats chess as a hobby. He never wants it to feel like work and prioritizes fun and enjoyment: ”The thing is that chess has always been a bit of a hobby for me. Once it starts to feel like work, then it's harder for me.”

Magnus Carlsen tells Joe Rogan about how he treats chess as a hobby. He never wants it to feel like work and prioritizes fun and enjoyment: ”The thing is that chess has always been a bit of a hobby for me. Once it starts to feel like work, then it's harder for me.”

Trung Phan

1,179,808 Aufrufe • vor 9 Monaten

🛠️ Maybe you've heard about WebMCP, but if you'd like to see it in action and learn how to work with it? I made a small site to demo how it works, how agents use it, what the spec looks like, and some important links. It's interactive! Use the extension to actuate the page:

🛠️ Maybe you've heard about WebMCP, but if you'd like to see it in action and learn how to work with it? I made a small site to demo how it works, how agents use it, what the spec looks like, and some important links. It's interactive! Use the extension to actuate the page:

Sarah Drasner

137,171 Aufrufe • vor 1 Monat

built a small space on the internet not a portfolio, just things i’m building, thinking about, and collecting like a journal site → adayinalife[dot]vercel[dot]app (check thread) how it works: i dump thoughts into poke ai Poke → it structures them in Notion → site pulls and turns it into a journal it’s kind of like my own twitter, just more personal hover to peek, click to go deeper built with vite + Cursor, deployed on Vercel this will always be a work in progress i’ll keep adding things as i go ( open to ideas and building something together and might make it public to make their own journals )

built a small space on the internet not a portfolio, just things i’m building, thinking about, and collecting like a journal site → adayinalife[dot]vercel[dot]app (check thread) how it works: i dump thoughts into poke ai Poke → it structures them in Notion → site pulls and turns it into a journal it’s kind of like my own twitter, just more personal hover to peek, click to go deeper built with vite + Cursor, deployed on Vercel this will always be a work in progress i’ll keep adding things as i go ( open to ideas and building something together and might make it public to make their own journals )

anurag 🌻

14,446 Aufrufe • vor 2 Monaten

I feel like The Flagship Podcast fans will enjoy this … our show will be a bit delayed tomorrow, and here’s a behind the scenes look into why/how that started and how Chip Brown & I handled it 😂😂

I feel like The Flagship Podcast fans will enjoy this … our show will be a bit delayed tomorrow, and here’s a behind the scenes look into why/how that started and how Chip Brown & I handled it 😂😂

Taylor Gaspar Estes

10,929 Aufrufe • vor 3 Jahren

Just a little bit of a deep dive into J. D. Vance and how much of a scumbag he really is. #Kamala2024 #LETSWINTHIS

Just a little bit of a deep dive into J. D. Vance and how much of a scumbag he really is. #Kamala2024 #LETSWINTHIS

Luke

137,997 Aufrufe • vor 1 Jahr

Cursor CEO Michael Truell: Programming in the future might not mean programming with an AI helper, but in a new language entirely. "There is a future version of the world where the way you interact with AI is a little bit less like it's a human helper that you're delegating work to... and instead, it's a little bit more of an advance in compiler or interpreter technology." "It can lead you to a world where programming languages actually change. They can start to be a little bit more about what you want and a little bit less about how you do it." "There is a world where direct manipulation of the UI starts to play a little bit more into it." Michael Truell with Patrick Collison

Cursor CEO Michael Truell: Programming in the future might not mean programming with an AI helper, but in a new language entirely. "There is a future version of the world where the way you interact with AI is a little bit less like it's a human helper that you're delegating work to... and instead, it's a little bit more of an advance in compiler or interpreter technology." "It can lead you to a world where programming languages actually change. They can start to be a little bit more about what you want and a little bit less about how you do it." "There is a world where direct manipulation of the UI starts to play a little bit more into it." Michael Truell with Patrick Collison

a16z

92,499 Aufrufe • vor 4 Monaten

"I don't like what Putin is doing, not even a little bit. Something happened to this guy and I DON'T LIKE IT." Talking like a pre-schooler.

"I don't like what Putin is doing, not even a little bit. Something happened to this guy and I DON'T LIKE IT." Talking like a pre-schooler.

NOELREPORTS 🇪🇺 🇺🇦

59,640 Aufrufe • vor 1 Jahr

“I cringe a little bit… How many like Hall of Famer superstars you want to team up with? It starts to turn into like a spectacle.” -Paul Pierce on LeBron and Steph teaming up 👀 Full Episode:

“I cringe a little bit… How many like Hall of Famer superstars you want to team up with? It starts to turn into like a spectacle.” -Paul Pierce on LeBron and Steph teaming up 👀 Full Episode:

No Fouls Given

43,968 Aufrufe • vor 2 Tagen

What happens when speech, transcription, and coding models work together? This prototype demo, built using a VS Code fork, showcases how MAI-Transcribe, MAI-Voice, and MAI-Code-1-Flash can work together in a unified workflow to transform spoken instructions into working code.

What happens when speech, transcription, and coding models work together? This prototype demo, built using a VS Code fork, showcases how MAI-Transcribe, MAI-Voice, and MAI-Code-1-Flash can work together in a unified workflow to transform spoken instructions into working code.

Microsoft AI

30,178 Aufrufe • vor 17 Tagen