The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
π¨ ππππππππ πππππππππ πππππ ππ ππππ πππ π° π
πππππ πππ
π
ππππππ πππ πππ πππ, πππ ππππ π
πππππππ ππ.
The concept is βObsidianβ: glossy black 3D loops floating behind graphite glass panels, with smooth scroll and scroll-triggered animation throughout.
What I built
Real-time 3D scene with React Three Fiber (three.js)
Scroll animations with GSAP + ScrollTrigger
Smooth scrolling with Lenis
Custom cursor and preloader
Fully responsive, respects reduced-motion settings
3D loads in a separate chunk, so the page paints fast
Falls back to a clean graphite background if WebGL isnβt available
Stack: React 18, Vite, Three.js, GSAP, Lenis
Love the reduced motion support.
β’ 1d
Thanksπ
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
I rebuilt the NFCtree website to match the new app.
Same colors, same fonts, same textures, from one design system.
β
I explored layouts in Paper first.
Looked at how Anchor, ugly.cash and Klarna handle scrolling.
Picked one.
β
Then I designed it in Figma.
Claude Code turned it into code.
Pushed to GitHub.
Vercel published it.
β
The scroll motion is CSS only.
It turns off when reduced motion is on.
β
Does your website look like your product?
nice
2nd variation of a landing page for a B2B search analytics platform
For this variation, I went with a lighter background where the CTA is visually focused instantly.
You might have 3~5 seconds to get the user's attention, so it's very important how the design looks and feels.
Full landing page coming tomorrow.
β’ Nov 1
Great work on this!