🏋️ SK FITNESS STUDIO
A real gym. A real glow-up. ✨
THE BUSINESS
SK Fitness Studio is a unisex strength & cardio gym in Chinnadharapuram, Karur. 100+ members, running two years. I trained there myself, so I knew exactly where their online presence was failing them.
THE OUTREACH
I pitched them the redesign myself. I showed the manager what their online presence actually looked like to a customer: a static page, no pricing, no timings, and a "Join Now" button that just dialled a phone number. Then I showed him what it could be.
He said yes on the spot. ✅
From there it was a hands-on collaboration. Real photos from the floor, their real pricing, their real timings, their real WhatsApp number, and the manager reviewing every iteration before it shipped.
He's in the video, in his own words. That's not a testimonial I wrote. That's the guy who runs the gym.
THE BEFORE
Their entire online presence was a single static page.
❌ No pricing
❌ No timings
❌ No way to book anything
❌ Every button on it ("Join Now", "Call Now") just dialled a phone number
📞 So if you were browsing at 11pm. Or you wanted the price before calling a stranger. Or the manager was busy on the floor and missed the call.
That lead was gone. The gym was running on missed phone calls.
⚡ THE AFTER
A fully designed, mobile-first site, built and published on Base44.
🎨 DESIGN
→ Kept their brand equity: their red, and their own tagline, "Gym first. Excuses next." (with EXCUSES struck through in red)
→ Dark, editorial, premium. Oversized display type, full-bleed photography, glass stat cards
→ An "Inside SK" poster grid with solid-over-outline titles, oversized numbering, red arrows
→ Motion throughout: ken-burns hero, an animated strikethrough, count-up stats, a scrolling marquee, hover states on every card
→ Fully mobile-responsive, with a sticky Book / WhatsApp bar always one thumb away
📝 CONTENT
→ Their real programs: weight loss, muscle gain, cardio
→ Their real timings: 6–10 AM, 4–10 PM, open all days
→ Transparent pricing, four tiers: ₹1,000/mo · ₹2,500/3mo · ₹5,000/6mo · ₹10,000/yr
→ An FAQ section, a gallery, a real location
🙅 No more "call to find out."
THE AUTOMATION
1️⃣ SESSION BOOKING SYSTEM
Visitors book a free trial (date + morning/evening) or a personal training session (date + time). Every booking writes to a Bookings table with a full status workflow: New → Confirmed → Completed / Cancelled.
2️⃣ AI AGENT (the core of it)
One agent, two front doors: their WhatsApp 💬 and a chat widget on the site. It's loaded with the gym's real pricing, timings, programs and policies, and it can:
• answer customer questions at any hour, in plain language
• collect name, phone, goal, date and slot
• create the booking itself, straight into the database
🔥 It doesn't just reply. It books.
3️⃣ ADMIN DASHBOARD
Every booking lands here: name, phone, type, date, slot, status. The manager filters, confirms, and runs his day from one screen. No spreadsheet, no notebook, no missed call.
🎯 THE RESULT
A gym that used to run on missed phone calls now takes bookings 24/7, on its own. 🌙
A customer can ask about pricing at midnight, book a trial, and be confirmed by morning, without anyone picking up a phone.
🗣️ The manager says it best himself. He's in the video.
🔗 Old site: https://skfitnessstudio.github.io/SK-Fitness-Studio/
🔗 Live site: https://sk-fitness-studio.base44.app
📣 Post: https://www.linkedin.com/posts/surya-ux_giveitaglow-base44giveitaglowchallenge-share-7481793147015127040-7FY0/
#GiveItAGlow
2
104
Air Sculpt - sculpt with your bare hands, in the air.
For 30,000 years we've shaped stone with our hands. I wanted to know: what if you still could - without ever touching a mouse?
Air Sculpt is a browser tool where you sculpt a real 3D marble form using only hand gestures, tracked live through your webcam, then export a genuine, 3D-printable file. The oldest art, in the palm of your hand.
🏛️ What it does
Pinch in the air to carve - the marble swells where you point, like clay
Press to push in, Smooth to polish, two hands to scale, a fist to rotate
Switch materials - marble, clay, bronze, alabaster
Finish → name your piece → export a real .STL you can 3D print
Every sculpture lives on in a museum gallery you turn through like a real exhibition
The whole thing is built as a classical sculpture museum - warm marble, golden skylight, an atelier you step into. Modern hands, ancient craft.
✨ How Wonder made it possible
I designed the entire world in Wonder:
Wonder Chat — built every screen (atelier, gallery, reveal, about) by describing them and reshaping on the canvas
Shaders — the golden museum light, drifting marble dust, and glowing material spheres are all real Wonder shaders, the whole atmosphere, not decoration
Figma paste-in — sketched a frame in Figma, dropped it in, Wonder matched it
MCP → Claude Code — because in Wonder the design is real code, I connected straight to Claude Code and shipped the whole thing live. No handoff, no rebuild. What I designed is what shipped.
The hand-tracking runs on MediaPipe + Three.js; Wonder was the design engine behind all of it.
I walked into Wonder to design a museum and walked out with a working product.
🔗 Live: https://airsculpt.vercel.app/
🎨 Wonder file: https://app.wonder.so/surya/files/019f14b1-5a6e-7049-b19d-66b9f422c950
Built for the Wonder Challenge
9
11
528
FERO - Untamed Energy 🐯
Most energy brands scream at you. FERO doesn't have to.
FERO is a fictional energy bar built on one idea: real energy doesn't need to prove itself. So instead of another hyped-up mascot throwing lightning bolts and shouting about gains, I built the opposite - the chill-est predator alive. A tiger with a permanent half-lidded stare who's already ahead of you and can't be bothered to mention it. The name says everything: "easy, tiger" - too much energy, worn like it's nothing 🔥
Then I built his entire world around him. One character, one attitude, stretched across a complete identity system - every asset unmistakably FERO, from the shelf to the street to the screen.
The character
A soft-matte designer-toy tiger - cute, collectible, and quietly convinced he's the best thing in the room. Cocky but never loud. I pushed him through a full expression range (smug, hyped, unbothered, mid-bite) so he holds his personality in any moment, not just one pose.
The identity
🔥 A custom wordmark hand-built from real tiger fur - orange and black, tactile, alive
🎨 Tiger Orange, Warm Black, Cream - his own coat doing the branding before a single word is read
🧩 A flat-vector system for the small stuff, a rich 3D world for the hero moments, two formats, one tiger
The applications
📦 Packaging - Peanut, Almond & Cranberry. Real fruit, real nuts, zero chill
🖼️ Poster & environmental - FERO in the wild, where he belongs
🏷️ Stickers & merch - the whole personality, ready to stick and wear
🥤 A custom FERO vending machine dropped into a real street
🎬 A full motion ad - one bite, zero to feral. "Some chase energy. You just bite."
The point
Same tiger, every touchpoint - packaging, poster, merch, motion, all speaking one language. That's the whole game: one mascot carrying an entire brand through consistency, attitude, and a world that actually holds together.
🐯 Character Brief
Name: FERO
Role: The chill-est predator alive
Personality: Cocky, dry, effortless, confident, unbothered - and always a step ahead.
FERO believes energy isn't something you chase - it's something you already have. One bite before a skate session or just walking through the world like he owns it, FERO's a reminder that the strongest move is never looking like you're trying.
🔗 Full project in Recraft: https://www.recraft.ai/project/e350424f-5c7c-4e2f-829b-600a224c9981
1
5
217
Here's THE INTRUDER 🔪
A woman wakes convinced there's an intruder in her home. The truth is so much worse.
I made this entire psychological horror short inside Renoise Canvas - every shot animated in Seedance 2.0 and stitched together right on the timeline. FacePass was the absolute game-changer for me: holding a character consistent across ~25 shots is usually the hardest part of AI video, and FacePass kept the quality and the consistency locked the whole way through. It's the single reason this feels like one film instead of a pile of disconnected clips.
I had so much fun directing this one shot by shot - having the look, the pacing, and the consistency all in one place is genuinely something else.
Hope you all enjoy it as much as I loved making it. Thank you, Renoise - incredible tool 🙏
Sound on and one hell of a twist waiting at the end! 😱
Canvas link 👇
https://renoise.ai/canvas?project=eaf778a2-b7eb-4e4c-9a40-51a25442d2e0
7
8
830
So happy to finally share what I've been building for the Figma Config Makeathon 2026 ✨
Afterword is a digital legacy app where you preserve your stories, memories, voice, and letters - and deliver all of it to the people you love, when the time comes.
When someone passes away, their loved ones don't just deal with grief. They deal with chaos.
Which bank accounts did they have? What subscriptions are still running? Is there a life insurance policy somewhere? Who's the lawyer? Where's the will? What passwords do they need?
Nobody knows. So, the family spends months, sometimes years - tracking everything down. Calling banks. Cancelling subscriptions. Trying to claim insurance without the right documents. All while grieving.
And beyond the practical side, the stories are just gone. The memories, the things they always meant to say, the letters they never wrote, the sound of their voice. All of it fades.
This shouldn't be this hard. So, I built Afterword.
Afterword is a place where you document everything, not just the practical stuff, but the things that actually matter. Your stories. Your voice. Letters you've been meaning to write. Memories you don't want to fade. All of it, kept safe, and delivered to the people you love, when the time comes.
What it does:
🤖 AI Story Interviewer powered by Gemini - asks real thoughtful questions about your life, you answer by typing or speaking hands-free, your answers become chapters
📖 Stories & Memories - written chapters and photo journals, every moment preserved with context
🎙️ Voice Notes - record messages for your loved ones, attach them inside letters or save standalone
✉️ Letters - parchment aesthetic, one letter per recipient, voice note attachment inside
⏳ Time Capsules - seal a message for her 18th birthday, his wedding day, or after you're gone
🔐 The Vault - 8 categories: Financial, Legal, Medical, Digital, Property, Contacts, Wishes, Documents, locked until needed
🎁 Care Packages - choose exactly what each person receives, personalized per recipient
👁️ Recipient Experience - what they see when everything unlocks, six tabs, everything delivered exactly as intended
How it works:
👥 You start by adding the people you love - your daughter, your partner, your best friend. Then you create your content, stories, voice notes, letters, capsules, vault entries, and build a personalized care package for each person, choosing exactly what they receive.
🤝 You set a trusted contact, someone you trust completely. And a check-in interval - weekly, monthly, whatever works for you.
🔒 As long as you keep checking in, everything stays private and locked. The moment you stop - Afterword waits, then gently notifies your trusted contact. They confirm. The vault unlocks. Each person receives exactly what you prepared for them, their stories, their letters, their voice notes, their capsules all at once, exactly as you intended.
📬 The recipient experience has six tabs - Home, Stories, Memories, Capsules, Vault, Voices. Everything organized, everything personal, everything yours.
⏳ You can also set time capsules to unlock independently - on a specific date, on a specific event, or as part of the vault unlock. So, her 18th birthday letter arrives on her 18th birthday, whether you're there or not.
If you've ever lost someone and wished you'd asked them more questions, this one's for you.
🎨 App: https://afterword.figma.site
📱 Try as a native app: https://afterword-mauve.vercel.app
(https://afterword-mauve.vercel.app)Open in Chrome on Android or Safari on iOS → tap Share → Add to Home Screen to install as a native app
What remains, matters.
3
5
198
FIFA World Cup 2026 Live Dashboard is a broadcast-grade, 6-page tournament experience built entirely with Google Stitch and deployed on Netlify. Starting from the official FIFA 2026 brand kit, I used Stitch’s streaming generation to build each page iteratively, in-place AI edits to refine components like match cards and the knockout bracket, and connected Stitch via MCP to Antigravity to automate multi-screen generation programmatically. The result is a real-time-aware dashboard with 104 match fixtures, animated Panini player cards, a CSS bracket visualizer, and live tournament state logic - all designed to feel like a FIFA+ broadcast experience.
I used Stitch as the primary design and generation tool throughout. Workflow: (1) Uploaded the official FIFA 2026 design system as a design.md (http://design.md) file, (2) Used streaming generation to build all 6 screens iteratively on the canvas, (3) Used in-place AI edits to redesign components - most notably the cyberpunk → FIFA broadcast redesign of the home hero, (4) Connected Stitch via StitchMCP to Antigravity to programmatically generate and edit screens via the MCP API - - used edit_screen, get_screen tools to automate multi-screen updates simultaneously, enabling batch edits across all pages without touching Stitch manually, (5) Used edit_screen again to iterate on the design layer directly through MCP - refining match cards, the knockout bracket, and player card layouts programmatically, (6) Used native HTML canvas and CSS animations for the bracket connector lines and motion design throughout.
Stitch’s streaming generation and in-place edits are genuinely game-changing for rapid prototyping. But the real unlock was the MCP integration - using an AI agent to orchestrate Stitch programmatically was the highlight of this entire build. It turns Stitch from a design tool into an automation layer, which is a completely different (and more powerful) workflow. Two things I’d love to see: better design token syncing between screens so global style changes propagate automatically, and a way to export the full project as a React codebase with routing intact rather than individual screen exports.
Live on Netlify: https://fwc-weare26.netlify.app/
Stitch Project: https://stitch.withgoogle.com/projects/7889672183129917406
7
4
618
Cinematic Designer Portfolio
Description:
A cinematic portfolio experience designed and developed to showcase modern product design, motion, and interactive storytelling.
Tech:
Next.js, Framer Motion, GSAP, TailwindCSS
Focus on:
animations
visual polish
modern interactions
premium feel
0
118
Cinematic Portfolio for a Creative Video Editor
Description:
Designed and developed a luxury-style portfolio experience for a video editor with immersive visuals and cinematic transitions.
Focus on:
storytelling
premium presentation
emotional visuals
1
0
150
AI-Powered Web Application
Description:
Built and shipped an AI-powered web platform focused on speed, modern UI, and rapid iteration.
Focus on:
shipping fast
product thinking
frontend polish
AI integration
0
111
knot | Where Moments Became Memories | UX/UI Case study
1
2