Loading video...
Video Failed to Load
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

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?

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.

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

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

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

Nice, I’m making Barney’s Bro Code

pretty easy to customize into different covers/themes.

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

Super clean design!

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

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

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

Link us to your websites!

Two of our apps websites!

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

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

This is using 5.6 Sol

Bro, your timing is 😙

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

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

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.

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

this is beautiful my friend as always

I absolutely love this, nice work. Very clean presentation

Very dope

Awesome! Thanks for the generosity❤️

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

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

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

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

Facts, I will play around with the idea.

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

Thats pretty cool

Beautiful

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

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

Excellent work 🔥

You are a legend!

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

Appreciate your efforts 👏👏

This is great step forward towards virtual library

Clean

amazing design

Beautiful ! 🫡

🔥🔥

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

The page flip detail alone is🤌

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

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.

🔥

How did you do the covers?
