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
I built this site with three.js and tried to make something different from the usual websites. All the models on the site are in GLB format, 13,3D models in total. The whole site runs on scrolling: with each scroll, the sentences appear one by one and the models come into the center of the screen. Visitors can drag each model and view it from every angle.
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
Learning OGL by rebuilding my portfolio's floating nav, inspired by Dynamic Island.
It stays compact while you scroll, then expands on hover, with the email button splitting off in a gooey morph. The shape is a signed distance field in a fragment shader, with GSAP handling the spring motion.
#webdevelopment #creativecoding #webgl #ogl #gsap
The gooey morph where the email button splits off is really satisfying, Oska. Using a signed distance field in a fragment shader for the nav shape is a great way to learn OGL.
Happy to finally share the full NEXUS project 🙌
A few days ago I posted a small motion teaser. Now the whole thing is live on my profile: 12 pages designed in Figma, a design system, and a homepage I built in HTML, CSS and JS with every interaction working.
12 pages in Figma plus a design system, then hand coding the homepage with every interaction working is a great way to show the concept holds up, Sofiia. Nice to see the teaser turn into the full project.
𝑨 𝒑𝒆𝒓𝒔𝒐𝒏𝒂𝒍 𝒑𝒐𝒓𝒕𝒇𝒐𝒍𝒊𝒐 𝒃𝒖𝒊𝒍𝒕 𝒕𝒐 𝒔𝒉𝒐𝒘 𝒉𝒐𝒘 𝑰 𝒅𝒆𝒔𝒊𝒈𝒏 𝒂𝒏𝒅 𝒅𝒆𝒗𝒆𝒍𝒐𝒑 𝒇𝒐𝒓 𝒕𝒉𝒆 𝒘𝒆𝒃, 𝒏𝒐𝒕 𝒋𝒖𝒔𝒕 𝒅𝒆𝒔𝒄𝒓𝒊𝒃𝒆 𝒊𝒕.
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.
