Built a shop site called Classical Looks the goal was clean, functional, zero unnecessary flash. Just a simple, well-designed store that lets the products do the talking. ποΈ
π https://classicallooks.squarespace.com/ (password: 12345)
Coming from a graphic/web-design background, I wasn't expecting Squarespace to feel this smooth less fighting the tool, more just designing. Here's what I used to pull it together:
πΉ Block Transforms, animated individual blocks for subtle motion across the layout. Genuinely too easy to use the hard part was restraining myself from putting it on every single block.
πΉ Stacks, grouped blocks to control how they behave together across screen sizes. Mobile is usually where things get messy, but this time it stayed smooth start to finish.
πΉ Built in Ai - For some of the copy.
πΉ Multi-language, added Italian as a second language for the store.
πΉ Custom touch (code), rounded the corners on the product gallery and related product images for a bit of extra polish.
Free assets used: Classical Looks 57 Photos & Videos Collected by ovi sebastian (https://www.pexels.com/collections/classical-looks-y2je1cc/) π
@squarespace #SquarespaceChallenge
3
4
175
π¨ As a web designer, I spend a lot of time redesigning existing websites. One thing that always slowed me down was switching between multiple browser extensions just to inspect colors, fonts, assets, code, screenshots, and more. π
π‘ So I built a concept that brings everything into one place. Just paste a website URL, and get a complete design overview in seconds.
β‘ What impressed me the most wasn't just the ideaβit was how quickly Wonder helped me bring it to life. Sometimes the biggest challenge is turning an idea in your head into something you can actually see and interact with.
π Check out the interactive preview:
https://app.wonder.so/hotima-ovidiu/files/019f2766-e266-78c6-b631-ce713b29480b
π Thanks, Wonder!
#wonderchallenge
3
116
MAKE A COOL HERO SECTION π
βΆ Live App (https://music-need-28282030.figma.site/)
Comes loaded with 6 ready-made heroes, two save slots to experiment, a third to go wild β swap brush effects, tweak size & fade, and there's even an export option if you're feeling brave (lightly stress-tested, heavily vibes-tested).
Want to roll your own? The full Weavy.ai (http://Weavy.ai) node workflow is linked below β just drop in your prompts and let it run. Or grab the two pre-made hero assets from Drive and jump straight into the fun.
π¬ See the video tutorial below β¬οΈ
π Figma Make Community File
(https://www.figma.com/make/6yEbqPCu7LTF2eFaur3BMx/Hero---Maker?t=zRELLJBoBh2yz9pF-1)π Weavy.ai (http://Weavy.ai) Image Mask Workflow
(https://app.weavy.ai/flow/PwK7Z9J8a6HOpc2HNtNjaG)π Ready-Made Assets on Drive (https://drive.google.com/drive/folders/1pWFacyl00zvbZKT6i6p5zW6F5SNS9txq?usp=drive_link)
Big thanks to @Figma, @Contra, and @Weavy for the tools, the platform, and the credits that made this possible. This was genuinely a blast to build. π
#ConfigMakeathon #FigmaMake #Weavy #Contra #Figma #HeroSection #NoCode #CreativeTools #UIAnimation #BuildInPublic
2
6
233
π¨ Color-Zen is LIVE β built for the #ConfigMakeathon hosted by @Contra
π Experience it live β Color-Zen (https://mature-type-72373433.figma.site/)
Sometimes you just need to breathe. And watch colors move.
Color-Zen is a Three.js powered visual experience where:
β¨ Stunning visuals react to your every mouse move
π Fluid, calming animations you can't stop watching
π¨ Colors blend and flow in ways that feel almost alive
π Pure zen β no rules, no scores, just pure visual bliss
Warning: highly addictive. You've been told. π«
Built with @Figma Make for the #ConfigMakeathon β proof that beautiful, immersive experiences can be shipped at hackathon speed π
Massive thanks to @Contra for hosting and @Figma for making rapid creative builds like this possible β¨
π§ Figma community β https://www.figma.com/make/IPJhP8EAwjb1jUj6zSmjsG/Color-Zen?t=DWcuWPUvEBvBMACc-1
#ConfigMakeathon #Contra #FigmaMake #ColorZen #ThreeJS #CreativeCoding #BuildInPublic #WebGL #GenerativeArt
7
12
507
Iβm excited to share my submission for the #FigmaMakeathon! π
Text Animator
Check out the live site here: https://design-beam-34224721.figma.site/
I built this professional-grade Typography motion engine web-app.
About the App:
Text Animator gives you granular control over typography. You can animate by word, character, or line using 3D presets, custom gradients, and Google Fonts integration. Once youβve dialed in the perfect easing and stagger, you can export the motion logic instantly as JSON, CSS, or React code.
Community share: https://www.figma.com/community/file/1609922308938596300/text-animator
Huge thanks to @Figma and @Contra for the opportunity to push the boundaries of whatβs possible.
#FigmaMakeathon #MadeWithFigma