Loading video...

Video Failed to Load

Go Home

I made this Three.js bookshelf inspired by the Stripe Press site. It scrolls horizontally, and you can open each book and flip through the pages. It took quite a few prompts to get the textures and small details right. I’m open-sourcing the code and prompt. Demo: GitHub: Inspiration:

158,012 views • 1 month ago •via X (Twitter)

51 Comments

Rohit Gupta's profile picture
Rohit Gupta1 month ago

The book opening does more work than the textures here. It turns the shelf from a gallery into a spatial interaction people already understand. Did you model each spread as its own state, or keep the whole page turn in one animation timeline?

Meng To's profile picture
Meng To1 month ago

Honestly, this is one of the wonders of AI. They are very good at these continuations. Sometimes they do miss frames, in which case I would tell them to fix it. But otherwise, most of the things, the animations, the state are entirely thanks to the AI.

Rohit Gupta's profile picture
Rohit Gupta1 month ago

Yeah, i am also exploring new systems to design fast.. Would be interesting to know what more you have in your workflow?

Sherry Jiang's profile picture
Sherry Jiang1 month ago

wow looks super slick!! saving down to look at later

Meng To's profile picture
Meng To1 month ago

Awesome. Hope to attend one of your talks in sg. Heard from Michael and Pizza.

Claudius Chuxuan Ma's profile picture
Claudius Chuxuan Ma1 month ago

Nice, I’m making Barney’s Bro Code

Meng To's profile picture
Meng To1 month ago

pretty easy to customize into different covers/themes.

Colleen M. Brady's profile picture
Colleen M. Brady1 month ago

@kabarza_ - Saw this and thought of some of your recent shares

Imran Hossen's profile picture
Imran Hossen1 month ago

Super clean design!

Maximac 🏴‍☠️'s profile picture
Maximac 🏴‍☠️1 month ago

trevor noah's web dev is the goat for inspiring lots of people ngl

Moez Zhioua's profile picture
Moez Zhioua1 month ago

Nice implementation, the horizontal scroll and page flip feel smooth. I’ve found that spelling out material cues and lighting angles in the prompt makes the texture results far more reliable. Keep the experiments coming

Terenze's profile picture
Terenze1 month ago

You’re making my websites feel so old now, haha. Need to update soon!

Meng To's profile picture
Meng To1 month ago

Link us to your websites!

Terenze's profile picture
Terenze1 month ago

Two of our apps websites!

Meng To's profile picture
Meng To1 month ago

Ah... when was the last redesign? :) Maybe I can help out.

Miguel Torrez's profile picture
Miguel Torrez1 month ago

Sexyyy! Which model did you use? I'm creating something similar for me but I'm not happy with the result

Meng To's profile picture
Meng To1 month ago

This is using 5.6 Sol

Nick Losciuto's profile picture
Nick Losciuto1 month ago

Bro, your timing is 😙

Hussain Hashim | Building SundayBack's profile picture
Hussain Hashim | Building SundayBack1 month ago

@MengTo that's so cool! curious how you handled the pagination. did it take a lot of trial and error?

Zohar Tito's profile picture
Zohar Tito1 month ago

did you describe the textures or feed it references? that's the part i can never get across in words.

Meng To's profile picture
Meng To1 month ago

A good trick is to ask the AI how to prompt that and then decide which of the descriptions makes the most sense, so you can describe something like book textures and lighting and 3D vocabulary around shapes and textures.

Zohar Tito's profile picture
Zohar Tito1 month ago

i do that too. textures are still where it falls apart, the words it gives back are never quite the material i meant

Daniel White's profile picture
Daniel White1 month ago

this is beautiful my friend as always

Builds By Ben's profile picture
Builds By Ben1 month ago

I absolutely love this, nice work. Very clean presentation

Gustav ❖'s profile picture
Gustav ❖1 month ago

Very dope

Jaren B.'s profile picture
Jaren B.1 month ago

Awesome! Thanks for the generosity❤️

Meng To's profile picture
Meng To1 month ago

included the prompt. hope to see a lot of creations from this!

Jaren B.'s profile picture
Jaren B.1 month ago

I will give it a try and share the results asap!

Cyprian Aarons's profile picture
Cyprian Aarons1 month ago

Can I add any PDF book and turn it into this? How hard would that be to achieve?

Meng To's profile picture
Meng To1 month ago

I'm pretty sure you can do that. You just need the right prompts and the right harness.

Cyprian Aarons's profile picture
Cyprian Aarons1 month ago

Facts, I will play around with the idea.

David T Kramaley's profile picture
David T Kramaley1 month ago

nice work, the horizontal scroll feels buttery and the page flip is surprisingly fluid. AI prompts for texture detail clearly make a difference

Kyle Maguire's profile picture
Kyle Maguire1 month ago

Thats pretty cool

tao's profile picture
tao1 month ago

Beautiful

安叫兽|Bird🕊️ 🔶 BNB's profile picture
安叫兽|Bird🕊️ 🔶 BNB1 month ago

翻书这个细节挺上头的,手感也像真的

sunny's profile picture
sunny1 month ago

Thanks for sharing. This is really helpful, especially for someone who is not super good at visual like me with research background

Jayaprakash's profile picture
Jayaprakash1 month ago

Excellent work 🔥

Fawaz Buqammaz | فوّاز بوقمّاز's profile picture
Fawaz Buqammaz | فوّاز بوقمّاز1 month ago

You are a legend!

Meng To's profile picture
Meng To1 month ago

not taking all credits, but trying to contribute! :)

Fawaz Buqammaz | فوّاز بوقمّاز's profile picture
Fawaz Buqammaz | فوّاز بوقمّاز1 month ago

Appreciate your efforts 👏👏

Dejan's profile picture
Dejan1 month ago

This is great step forward towards virtual library

Ayoub | Flawless.Design's profile picture
Ayoub | Flawless.Design1 month ago

Clean

Naimur Rahman's profile picture
Naimur Rahman1 month ago

amazing design

Kuntay's profile picture
Kuntay1 month ago

Beautiful ! 🫡

jojo's profile picture
jojo1 month ago

🔥🔥

Bishakh Neogi's profile picture
Bishakh Neogi1 month ago

Hey Meng, I am back with a playlist and inspired from you have started posting daily with visual graphic motions diving deep into AI and system design. Would love to have your feedback and if you could help me with some engagement. We had a word before on the vector playground I have been building

Simon's profile picture
Simon1 month ago

The page flip detail alone is🤌

Pavan GK's profile picture
Pavan GK1 month ago

looks clean. can you share the prompts that you used to get this look?

Emirsayl's profile picture
Emirsayl1 month ago

did you use that 'text-to-threejs' repo while creating this ? it looks fascinating but little laggy. maybe its me but still sature visuals, nice.

Aye Jake's profile picture
Aye Jake1 month ago

🔥

Felipe Cardona's profile picture
Felipe Cardona1 month ago

How did you do the covers?

Related Videos