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
A fun project with Claude Opus 5.5 and Claude Design. Zero Figma.
Built with HTML, CSS and JavaScript, plus GSAP (ScrollTrigger + SplitText) for the scroll story, Lenis for smooth scroll, Three.js / WebGL for the 3D butterflies, day-to-night scene and map, and Web Audio for the live jungle sound. I wanted to see how far I could push a website without opening Figma once.
→ A cinematic hero with 3D butterflies that fly around your cursor
→ Chapters that reveal as you scroll, like a short film
→ A full day in one valley, from 06:10 sunrise to 22:10 night
→ A 3D map where you can play the whole journey
→ A live jungle soundscape, birds by day, crickets by night
To be fair, it wasn't one prompt and done. I pushed back a lot.
Scroll it with headphones on 🎧
Live website link in the comment ⬇️
1 to 10, how immersive is it? Drop your number ⬇️
Concept only, the resort, reviews and details are fictional.
#WebDesign #UIDesign #AIDesign #Claude #CreativeDevelopment
Experience the live site:
for better experience visit from your desktop.
https://jungle-cottage-website.vercel.app/
jungle-cottage-website.vercel.app
Jungle Cottage: stay somewhere the world feels far away
A concept website for a luxury jungle retreat. Cinematic scroll, 3D scenes and a live jungle soundscape. Designed by Md Mahdi Hasan.
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
🔥 New addition to my portfolio 🔥
Previously I had an SVG mask of my logo in the center with my showreel behind it, but this had a couple of issues. So yesterday I pushed it further and I created a 3D variation, video playing inside it, glass refraction and it's even more beautiful when you click into it.
Take a look; www.grilledpixels.com
the glass refraction on the 3d mark is a cool touch. did you build the interaction with three.js?
Team Sections: Professional Only or Professional + Personal?
A team section can build trust in different ways.
Version A - Professional. Focuses on the coaches’ professional experience - their expertise, years of practice, and approach to working with clients.
Version B - Professional + Personal. Keeps this information but adds a Weekend Mode with personal photos, interests, and small stories about life outside work.
For a coaching website, both sides matter: expertise shows competence, while personality helps visitors feel a human connection.
Which version would make you more likely to choose a coach?
22 voted
61%
14 voted
39%
36 votes
Closed
Upgoating version B
Meriot personal portfolio Website Homepage showcase
A portfolio website designed to turn personal expertise into a strong digital presence.
The goal was to create a website that communicates experience, personality, expertise, and credibility within the first few seconds.
I focused on:
Clear positioning and personal branding
Strong visual hierarchy
Editorial-style typography
Project-focused storytelling
UX/Product Design service presentation
Testimonials and social proof
Clear CTA for potential clients
Responsive, conversion-focused layouts
The visual direction combines minimal typography, bold imagery, dark/light sections, and subtle interactions to give the portfolio a distinctive personality without making it difficult to navigate.
Top notch execution