Built around a before-and-after light study and a free consult flow that previews the exact text plan a patient gets after booking. Soft, warm palette, custom light animation. Live: https://www.vishalchopde.com/work/oriel

Built around a "safe to spend" number instead of a raw balance, because that's the number people actually check before they buy something. Custom wave animation in the header, all SVG, no image assets. Live: https://www.vishalchopde.com/work/keel

The site is studio gear seen from above: tape deck, LCD, pad sampler. Every beat is synthesized live in the browser. The reels turn with the tempo and the pads follow the key. Two versions of the same brief, one page: - Page view 1: the full desk, with a license picker on the LCD - Page view 2: a second take, different layout Switch at the top. The audio in the view you leave stops. Sound on for the video. Live: https://www.vishalchopde.com/work/lowtide-audio Which would you ship, Page view 1 or Page view 2?

Live: https://www.vishalchopde.com/work/ivory-oak Rest of my work: vishalchopde.com Built a concept site for a cosmetic dentist this week. The whole page is one smile, drawn in code. Quick walkthrough in the video. Drag the slider and the teeth go from Natural to Brightest, with sparkles at the top end. Tap the smile and it switches to alignment mode: you see gaps and crowding, then the teeth straighten in front of you. Then it follows you down the page. It sits dim behind the big type, fixes a chipped tooth when you reach bonding, gets a scan pass in the first visit section, and sparkles when the SMS demo replies. That SMS part is what I'd actually sell. Someone texts the practice at 9pm, gets two consult times back in seconds, replies 1 and they're booked. It's the same n8n + Twilio flow I build for clients, shown as a phone on the page. What I learned building it: - No photos anywhere. A drawing means no patient consent forms, and every illustration is labeled "not a patient photo". - Mona Sans has a width axis, so the headline actually widens under your cursor. It's the first time a font did a job for me instead of just sitting there. - I rendered it headless at 9 screen sizes before calling it done and fixed 10 layout problems I would have shipped. One example: the treatment smile got cut off on short laptop screens. - Stack: one HTML file, SVG and canvas for the smile, GSAP and Lenis for motion. It's a fictional practice with placeholder prices and no real patients. Question for anyone selling to clinics: do you lead with the website or the booking automation? I keep going back and forth.

Video's attached, but open the link on your phone too. It's more fun to drag. Solenne is a concept site for a made-up engagement ring brand. Fake brand, real build: one HTML file, about 94 KB, with the diamond rendered live in WebGL. There isn't a single stone photo on the page. Case study: https://www.vishalchopde.com/work/solenne Portfolio: vishalchopde.com Parts I'm proud of: - Four decisions. Scroll through cut, colour, clarity and carat and the stone changes with each one. Colour warms up, clarity shows small inclusions, carat grows to the real size difference. - Configurator. Pick a shape and a metal, and your choice carries into the booking form so nobody has to retype it. - Budget guide. Type a budget and it suggests a shape and size, then turns the stone face up against a millimetre ruler. It's marked illustrative, because a made-up price on a jeweller's site is a bad idea. The unglamorous part took the longest. It had to hold up on a 320px phone, with reduced motion switched on, and on devices where WebGL fails. Those get an animated drawing of the stone instead. My thinking: people shopping for a ring want to look at the thing. Most jeweller sites give them a flat photo and a contact form, then wonder why nobody books. What would you change before pitching this to a real jeweller? Mobile feedback especially welcome.