Explore Cocoon: Your AR Sensory Filter for a Calmer WorldExplore Cocoon: Your AR Sensory Filter for a Calmer World
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
2 weeks and roughly 18K Figma credits later. What do I have to show for it? This is Cocoon. Cocoon is an AR sensory filter concept. Featuring a single dial that controls how much of the world you want to let in. Visually, aurally, atmospherically. You stay aware, you stay social, you stay safe. And you get to dial down the world a notch. The concept works like this. You arrive at Times Square, and before you even step out of the subway, you can start to feel the intensity. Lights, billboards, cars honking, chatter like a roar. Activate Cocoon, and a dial appears. As you turn it, two things happen simultaneously: Nature leaps forth to work its magic, claiming the space visually, and then you notice the hush. And the audio streaming becomes a lot more soothing.
The world keeps moving the entire time. Traffic doesn't freeze. The crosswalk signal still changes. People walk on by. But your relationship with the environment is not like theirs. You're cocooned.
The build
The whole project lives in Figma Make. The design system was built in Figma first — a VisionOS-inspired spatial UI with frosted-glass substrates, tracked caps, and clinical instrument aesthetics. Tokens and effect styles (surface/glass, Cocoon/Glass Frost, Cocoon/Violet Glow) were established in the design file and referenced throughout the prototype.
Video layers use a two-track architecture: a living-world loop plays independently beneath, while a nature-transformation clip is masked and dial-controlled on top. The SVG mask paths were hand-extracted, and honestly, a pain in the butt foreal foreal.
Claude, via Figma MCP and within Figma Make, served as the design-to-code bridge. There was a lot of debudding, and I haven't gotten into a code base like this in a while. Turns out I like coding better now lol.
The Purpose
1 in 6 people experience sensory processing sensitivity. The cornerstone of Cocoon is that a calmer world should always be at our fingertips. Test it out https://cocoon-reality.figma.site/ Live Project Project Folder
Soften reality. Cocoon reality.
MD Rafee 's avatar
The dial as a single control for sensory input across visual and audio simultaneously is a strong design decision. Most accessibility tools treat those channels separately. The 1 in 6 stat reframes this as a mainstream product need, not a niche one.
Moors's avatar
Great feedback! It didnt occur to me to decouple the two. You just placed a valuable observation on the table to consider for implementation. I see user personas emerging now to shape the experience. And yeah i really think it can be impactful in general. Addressing something...
Dylan's avatar
Contra logo
Holy smokes, Moors this is actually so rad. Having walked through time square yesterday, I wished I should zone it out. Nice work
Moors's avatar
Hey Dylan! Great to hear I'm not alone with that experience. :'D Thank you! 💯
Back to feed
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