Somrat

UI/UX Developer. 🦁 Crafting fierce interfaces and leading users through the digital jungle.

[Somrat @somratchandra]

Takeaway: users don't remember "clean ." They remember how an interface felt .
Motion, sound, and feedback are free real estate almost nobody uses .
If this was useful, a repost helps a lot ​
Follow for more builds like this . @somratchandra 🦁

[Somrat @somratchandra]

Most 🦁 UI on the web is boring rectangles . So I built a tactical radial selector that feels like it came out of a sci-fi game . Sound on🎶🎵

I built a game-style radial menu for the web.
Full sound design . Live telemetry. Light/dark . 2D → 3D parallax .
No libraries could do this, so I made it myself.
Here's how

[Somrat @somratchandra]

Stack :
+---- React + TypeScript
+---- Tailwind for the design system
+---- GSAP for the orbital motion + arc sweeps
+---- Web Audio API for the sound cues
No game engine. Just the browser doing what it's always been capable of .

[Somrat @somratchandra]

live : https://t.co/7bMEkr0PZW

[Somrat @somratchandra]

I built a landing page that's 99% darkness .
Your cursor is the only light source a hanging lamp follows your mouse and reveals the page as you explore it . Everything works while you scroll the lamp keeps revealing each section: the fixture, the specs, how it works .

Stack:
Next.js 15 (App Router)
GSAP for the animation loop
styled-jsx for scoped styles
Zero UI libraries
The whole light system is ~200 lines of code.
Watch this 📷 (video)

[Somrat @somratchandra]

live : https://t.co/RG8MVfRfj9

[Somrat @somratchandra]

I🦁 built this entire interactive landing page with ONE prompt . Just one HTML file .40KB . No React . No Three.js. Zero frameworks. No build step. Swipe the text and it moves like silk . Silk 🧵Road landing page where the text is a physical curtain you can grab, throw, and part with your finger . Sound on🔊

POV: you ask AI for a landing page and it hands you a museum exhibit. 1 prompt → 4 scenes, 3 countries, real physics.

#buildinpublic #webdev #AIart

[Somrat @somratchandra]

I built the whole thing in a single HTML file using: • Three.js (instanced foliage + particles) • GSAP (buttery transitions & interactions) • Claude Fable 5 (iterative prompting + the attached reference image for the exact foliage look)
No heavy frameworks. Just pure web magic.

https://t.co/sICRDUsA9I

[Somrat @somratchandra]

@threejs Behold! This is the tragic fate of your half-dead flower🥀

[Somrat @somratchandra]

“Most interfaces look fine… until users actually try them." 🦁

Most interfaces look fine on the surface. But users get frustrated, confused, or just leave. As a UI/UX Developer, these are the 5 biggest sins I fix in almost every project — and the simple changes that make interfaces feel premium instead.

Sin #1: No clear visual hierarchy Everything fights for attention. Users don’t know where to look first. Fix: Make the most important action the biggest, boldest, and highest contrast element. Use size, color, and spacing intentionally. (Attach: Side-by-side screenshot — cluttered screen vs clean version with one dominant CTA)

Sin #2: Inconsistent spacing & alignment Random gaps and misaligned elements make everything feel cheap and broken. Fix: Use an 8-point grid system. Consistent padding and alignment = instant polish. (Attach: Before/after showing tight vs loose spacing)

Sin #3: Buttons that don’t look clickable Flat text or low-contrast buttons get ignored. Users don’t know what to tap. Fix: Add subtle shadows, hover states, and enough contrast. Make primary buttons stand out clearly. (Attach: Bad flat button vs good elevated + colored button)

Sin #4: Too much cognitive load Too many options, long forms, or unclear next steps. Users overthink and bounce. Fix: Reduce choices. Use progressive disclosure. Show only what’s needed right now. (Attach: Overwhelming form vs simplified progressive form)

Sin #5: Ignoring micro-interactions & feedback No loading states, no success messages, no hover feedback. Feels dead and unresponsive. Fix: Add subtle animations, loading indicators, and clear success/error states. It makes the product feel alive. (Attach: Static screen vs screen with nice loading + success animation)

These 5 fixes alone have turned “meh” interfaces into ones users actually enjoy using. The best part? Most of them are quick to implement once you know what to look for.

Which of these sins do you see most often in apps you use? Drop it below 📷 And if this helped, follow @somratchandra 🦁for more practical UI/UX tips from the trenches. I’m sharing real lessons from building interfaces every week.
(End of thread)

#UIDesign #UXDesign #DesignTips #ProductDesign

[Somrat @somratchandra]

@rom1trs create this using grok !

[Somrat @somratchandra]

site link: https://t.co/UlzvPDqhJ5

[Somrat @somratchandra]

🚀 Just shipped Anya — a modern, responsive web app built.

🔧 Stack: • TanStack Start (React 19 + SSR) • Vite 7 + TypeScript • Tailwind CSS v4 • Deployed on Netlify

🎨 Features a custom animated MeshText logo, fully responsive navbar (desktop + mobile menu), and a clean component-driven UI.

From idea → live site in hours, not weeks. The future of building is conversational. 🧠✨

#React #TanStack

[Somrat @somratchandra]

@arpitisharkar Live link :https://t.co/MEF34DS89q

[Somrat @somratchandra]

Built a GANDER-style agency landing page ​
React + Node.js
Full-bleed hero video (no bg images)
Draggable sticker logo — WebGL peel + sheen
Animated count-up stats
Glassmorphism UI #reactjs

[Somrat @somratchandra]

Sharing something I've been crafting: a premium, animation-first web experience.
Next.js · GSAP · Three.js · ScrollTrigger · Tailwind CSS · buttery 60fps throughout, immersive 3D depth, smooth scroll.
Built to blend engineering precision with visual polish. 📷​
#nextjs #threejs