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.

Over the last few weeks I've been building one concept website at a time, each for a different niche. Every page is built around one interactive idea instead of a wall of copy. Here are all six, with what each one is built around and what I learned. 1. Wren: AI voice receptionist A live call demo plus a missed-call cost calculator. You set your missed calls, booking rate and job value, and it shows current loss next to what recovering 50% would add per year. That comparison came from feedback in this community, and it's now live. Lesson: a number the visitor calculates themselves beats any claim I could write. https://www.vishalchopde.com/work/wren 2. Aphelion Launch: small-satellite launch provider Scroll-driven rocket launch, an orbit reveal and a payload cost estimator, so a mission planner gets a price range in under a minute. Lesson: for technical buyers, let them see the price before they talk to anyone. https://www.vishalchopde.com/work/aphelion-launch 3. Castellan Reyes: personal injury law The whole page is built around a claim clock showing how much of the Texas filing window is left. Urgency without being sleazy, because the countdown is true. Lesson: the best conversion element isn't always copy. Sometimes it's a clock. https://www.vishalchopde.com/work/castellan-reyes 4. Keel: card-first neobank Built around a "safe to spend" number instead of a raw balance. Draggable 3D card with an iridescent finish, a round-ups jar that fills as spare change adds up, and an SVG wave header. Lesson: pick the one number people actually make decisions with, and put it first. Also: mobile testing matters. A community member spotted jitter on the card at one section, and I'm working on a fix. https://www.vishalchopde.com/work/keel 5. Oriel Skin Studio: nurse-led skin clinic A before-and-after light study instead of stock photos, a free consult flow, and a preview of the written text plan a patient gets after booking.

Drop in an invoice, receipt or contract, watch it shred and come out typed and validated on the other side. This one's for developers, so the whole page is one live demo, no marketing fluff. Personal Website: vishalchopde.com Live: https://www.vishalchopde.com/work/glint