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
Scroll-driven 3D experience built to capture attention without sacrificing performance.
• Engineered with Three.js and GSAP for buttery-smooth scroll choreography.
• Optimized for 60FPS across desktop and mobile devices.
• Features custom PBR materials, dynamic lighting, and particle systems.
The 'scroll choreography' here is top-tier. 👏 Most brands don't realize that a high-performance Three.js experience acts as a silent trust-builder. When the interaction is this responsive, the user immediately perceives the brand as more premium. A massive asset for any structured content system!
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
Brand storytelling, web design & development for Breuer Bauer — GSAP animations, custom transitions, Lenis smooth scroll, and modular JS architecture.
Brand storytelling, web design & development for Breuer Bauer — GSAP animations, custom transitions, Lenis smooth scroll, and modular JS architecture. Built end-to-end in Webflow.
Inspired by the organic movement of jellyfish, this concept explores how lighting can feel alive within a digital space.
This project was designed and built in Framer, combining visuals with interaction:
– custom code component with floating jellyfish in the background
– scroll-triggered light activation (lamp gradually “wakes up”)
– progressive text reveal for a softer narrative entry
– glass-style logo shader using Framer’s latest visual capabilities
The goal was to create a calm, immersive product moment - something between a landing page and a sensory experience.
This is solid 👏 The overall presentation is very strong
A product is easy to build.
A brand is what makes it unforgettable.
So I built BRANDRY!
A workflow that takes a single input—a keyboard—and expands it into a complete, premium brand system.
—
I didn’t want random outputs.
I wanted something that thinks like a design studio.
Everything starts with the input image.
I analyze:
• materials
• lighting
• form
• design language
From that, the entire brand direction is derived.
—
Then the system builds across four layers:
1. Logo:
A refined mark inspired by the product—never copied, always reinterpreted.
2. Moodboard:
Colors, textures, and visual cues extracted and elevated into a cohesive direction.
3. Brand Identity:
A dark, premium system—typography, palette, and visual language working together.
4. Website Mockup:
A cinematic presentation—displayed on devices, placed in a real environment, lit like a product ad.
And to bring everything together, I leaned heavily on the Compositor Node.
Every output is carefully layered:
• controlled lighting
• depth and shadows
• balanced composition
Then inside the Creative Code Node, I used Three.js to construct a 3D version of the product.
That added:
• real depth
• accurate lighting interaction
• natural integration into scenes
Workflow: https://app.fuser.studio/view/03af9496-bc89-4f76-a1b7-00c25c7fb513
The product doesn’t feel placed—it feels built into the frame.
…this one’s my second submission.
looks fantastic 👌
Trending
Runway
AI video generation is exploding. What are you dreaming up in Runway?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?