Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Stumbled on Vercel’s creative design team page and instantly fell in love with the design, animations, and micro-interactions. So I decided to take a shot at it, recreating the experience for a fictional company called Varxell, with my own spin on everything except the design itself + I didn’t... touch any of their assets. Everything was hand-coded from scratch, and every single asset was recreated in Figma. It was a fun challenge. Built with: • React • TypeScript • Vite • Framer Motion Live site: • • Repo: • Every page functionality and animation was implemented as a reusable hook, with internal JSDoc to make it easy to reuse in your own projects or remix however you like. Got any questions? Feel free to shoot me a DMshow more

David Herbert👨🏽‍💻🚀

56,338 subscribers

23,755 views • 1 year ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

10 Comments

I D R I S1 year ago

@vercel This is smooth 👌

David Herbert👨🏽‍💻🚀1 year ago

@vercel 🙌🏽😤

Dwarf ၊||၊ DeSpeed ၊||၊1 year ago

@vercel This is dope and clean

Shubh Sharma ⚡1 year ago

@vercel Simple, minimal and still cool!

David Herbert👨🏽‍💻🚀1 year ago

@vercel 💯

char *AJ = "Pixel Perfect 🎨";1 year ago

@vercel 🤩 the micro interactions are crisp.

Abayomi Oladosu1 year ago

@vercel All animations are smoothly connected together. What an amazing work 👏🎉

Sammie_0J 🪖1 year ago

@vercel Lovely 😍❤️

Andrea1 year ago

@vercel This is really smooth and engaging 🙌🏼

David1 year ago

@vercel Wow!! this is beautiful. Definitly working hard to get to this level💪

Related Videos

🎨 Introducing Genspark Design The next-gen AI for design and creation, powered by Claude Opus 4.7. From rough idea to professional design, no design background needed. - One tool for everything you design. UI prototypes, videos, HTML animations, posters — all in one place and production-ready. - Stay on-brand with your own design system. Upload your Figma files or save your designs, reuse them across every project, and share them with your team. - Ship it, don't just mock it. Turn any app or website design into working code with one click, built on Genspark Code. Start building at our launch price 👉

Genspark

179,614 views • 2 months ago

changed how I design with AI. I show how to build faster by adding a design system directly into the prompt, importing any website URL to get a strong starting point, then polishing everything in my own style. I also mix it with components and skills to keep the design consistent and more unique. GPT-5.5 cloning websites is honestly crazy good. The result can get very close to the original, then you can refine it and make it your own. Full breakdown in the comments.

changed how I design with AI. I show how to build faster by adding a design system directly into the prompt, importing any website URL to get a strong starting point, then polishing everything in my own style. I also mix it with components and skills to keep the design consistent and more unique. GPT-5.5 cloning websites is honestly crazy good. The result can get very close to the original, then you can refine it and make it your own. Full breakdown in the comments.

FHILY👑

57,007 views • 4 months ago

yuta: we have a team jacket for our md and taeyong took part in the design 🌹: it was supposed to be a secret, i always wanted to make a team jacket. i am taking part in the design, so i gave samples of my own clothing

yuta: we have a team jacket for our md and taeyong took part in the design 🌹: it was supposed to be a secret, i always wanted to make a team jacket. i am taking part in the design, so i gave samples of my own clothing

taeyong pics

32,379 views • 2 months ago

I'm Motion, a video agent built by Mosaic for tasteful motion design. This launch video was made entirely by me. 👇🏽 Here’s how it works: 1. Give me a prompt — include any context like product links, X threads, YouTube videos, personal assets, and more. I will reference styles, incorporate research, and storyboard scenes. 2. I create the video — I can orchestrate entire explainers, launch videos, logo animations, or even add motion design to your own videos. I have taste in my visual animation. 3. Edit everything with chat — tell me to iterate on selections or add new elements until you’re satisfied. No need to re-generate entire scenes or deal with hallucinated artifacts. Comment “MOTION” for early access + free credits. Learn more at motion [dot] so.

Motion

12,406 views • 5 months ago

Monster Hunter X Smash Bros! I recreated SSBU with Welly in Unreal Engine and put in the Hunter. I did the programming, design, animation (including copying SSBU animations), and about half the VFX. It was a lot of work, but it was fun!

Monster Hunter X Smash Bros! I recreated SSBU with Welly in Unreal Engine and put in the Hunter. I did the programming, design, animation (including copying SSBU animations), and about half the VFX. It was a lot of work, but it was fun!

Martin

1,406,030 views • 2 years ago

meet the app gallery a curated library of vibe coded projects built with powerful AI integrations like Nano Banana, Maps Grounding and more remix any app with a single prompt and continue building to make it your own

meet the app gallery a curated library of vibe coded projects built with powerful AI integrations like Nano Banana, Maps Grounding and more remix any app with a single prompt and continue building to make it your own

Google AI Studio

74,784 views • 10 months ago

If you want to design faster in Figma, Use blocks. → A free library of ready-to-use Figma UI blocks. Copy any component, paste it into your file, and start building instantly. Perfect for landing pages, layouts, and UI sections. Use it for: • landing page sections • UI components • layout structures • quick prototypes • design inspiration you can actually use Stop designing everything from scratch.

If you want to design faster in Figma, Use blocks. → A free library of ready-to-use Figma UI blocks. Copy any component, paste it into your file, and start building instantly. Perfect for landing pages, layouts, and UI sections. Use it for: • landing page sections • UI components • layout structures • quick prototypes • design inspiration you can actually use Stop designing everything from scratch.

Kailash

84,239 views • 3 months ago

One of my first projects Linear was to make the launch video for Insights. It was a dream brief – everything Karri Saarinen asked for was exactly the kind of style that resonates with me. It was a challenge to try and live up to that. Here are some bits on the proces...

One of my first projects Linear was to make the launch video for Insights. It was a dream brief – everything Karri Saarinen asked for was exactly the kind of style that resonates with me. It was a challenge to try and live up to that. Here are some bits on the proces...

Alex Cornell

146,660 views • 3 years ago

STOKED to collab with @whalesync this year to refresh their brand, site, and product! As a customer and fan, it was so fulfilling to impact everything from early content and strategy, through design, development, and animation. Go upvote on PH! — Case study coming soon...

Corey Moen

10,284 views • 1 year ago

I designed Branding + Website landing page for Prolific Studios; a premier game design studio on TON Blockchain with multiple live games. The focus whlist designing this for the project founder was a clean, futuristic, graphic first website and the project community gave this a 5 star review. Check it out: _______________ Web3 founders!; i design the best web3 website tailored to your goals and community! Shoot me a dm lets work with you!

I designed Branding + Website landing page for Prolific Studios; a premier game design studio on TON Blockchain with multiple live games. The focus whlist designing this for the project founder was a clean, futuristic, graphic first website and the project community gave this a 5 star review. Check it out: _______________ Web3 founders!; i design the best web3 website tailored to your goals and community! Shoot me a dm lets work with you!

EA

121,967 views • 2 years ago

You can now clone any website design in seconds with AI. Just grab any live UI with the new MagicPath Extension and the AI will instantly create a working clone you can build on top of. I literally just recreated Claude’s UI with it. This is Figma completely redesigned.

You can now clone any website design in seconds with AI. Just grab any live UI with the new MagicPath Extension and the AI will instantly create a working clone you can build on top of. I literally just recreated Claude’s UI with it. This is Figma completely redesigned.

Alvaro Cintas

201,163 views • 10 months ago

Figma Capture + Claude Fable 5 = clone any competitor's landing page in minutes 🤯 Figma just dropped a Chrome extension that copy/pastes any live website into Figma as editable layers. Point Claude Code — running the new Fable 5 model — at the capture, and it rebuilds the whole page in YOUR brand: structure, copy, design system, photography. All inside Claude Code. Perfect for DTC brands and agencies who keep losing weeks rebuilding proven landers from scratch. If you're still cloning competitor pages the old way, You're screenshotting their site and praying the AI guesses the structure right. You're rebuilding sections by hand because the fonts and spacing never come out true. You're paying a designer $3K to recreate a page that already exists. This workflow eliminates the entire loop: → Capture the competitor's landing page with Figma's new Chrome extension — editable layers, not screenshots → Claude Code reads the page structure through the Figma MCP: every section, every headline, in order → It rebuilds the page in YOUR brand — your colors, your fonts, your voice (it even respects your banned-words list) → GPT Image 2 generates on-brand product photography from the layer names → Claude places every image automatically — finished page, ready to ship No screenshots. No guessing at structure. No design invoice. What you get: → A pixel-structured clone of any proven lander, rebuilt in your brand → Every line of copy rewritten in your voice → 16 on-brand images generated and placed for ~$2 in API costs → Start to finish in about 15 minutes Built 100% with Figma + Claude Code on Claude Fable 5. I put together a step-by-step playbook showing you exactly how to set it up. Want access for free? > Like this post > Comment "CLONE" And I'll send it over (must be following so I can DM)

Mike Futia

47,108 views • 3 months ago

When I was 8 years old, my favorite thing in the world was making mixtapes for my Walkman from my big sister’s CDs. That evolved into Lego stop-motion videos, and later, I fell down the rabbit hole of editing Naruto anime clips to Evanescence & Linkin Park beats. Looking back, it’s obvious: Sound and Video were always the main drivers in my life. I think that obsession also led me to my true love: Motion Design. A huge shoutout to Kevin who showed me +10 years ago the world of Motion Design. And honestly, look at where we are now. Who would have thought that there would be such a massive hype around Motion Design and UI promo videos? From giants like Airbnb to the new generation of creators like sutoxoriginals. The visual standard in 2026 is insane. But there was always one part of the process that felt like a grind to me: Sound Design. I love the result, but I hated the process. I was spending 4-5 hours per project just searching for the right sound effects. "Key typing effect" "Mouse click" "Subtle Whoosh" and so on.. So, I decided to fix it. I sat down with a Dev friend and we spent the last few weekends building a native AI tool right inside After Effects. The concept is simple: SoundDesigner AI watches your video. It understands the vibe and exactly what’s happening and when its happening. It sees a clock ticking or a text appearing, and it generates the perfect sound for it in seconds, synced to the action in your timeline. I’ve been using it on my own projects for a few days now, and it’s wild. My sound design workflow went actually from 5 hours to 20 minutes. We are launching this in February (fingers crossed for the approval at aescripts+aeplugins) If you want to see where this goes and try it out yourself, drop me a DM

When I was 8 years old, my favorite thing in the world was making mixtapes for my Walkman from my big sister’s CDs. That evolved into Lego stop-motion videos, and later, I fell down the rabbit hole of editing Naruto anime clips to Evanescence & Linkin Park beats. Looking back, it’s obvious: Sound and Video were always the main drivers in my life. I think that obsession also led me to my true love: Motion Design. A huge shoutout to Kevin who showed me +10 years ago the world of Motion Design. And honestly, look at where we are now. Who would have thought that there would be such a massive hype around Motion Design and UI promo videos? From giants like Airbnb to the new generation of creators like sutoxoriginals. The visual standard in 2026 is insane. But there was always one part of the process that felt like a grind to me: Sound Design. I love the result, but I hated the process. I was spending 4-5 hours per project just searching for the right sound effects. "Key typing effect" "Mouse click" "Subtle Whoosh" and so on.. So, I decided to fix it. I sat down with a Dev friend and we spent the last few weekends building a native AI tool right inside After Effects. The concept is simple: SoundDesigner AI watches your video. It understands the vibe and exactly what’s happening and when its happening. It sees a clock ticking or a text appearing, and it generates the perfect sound for it in seconds, synced to the action in your timeline. I’ve been using it on my own projects for a few days now, and it’s wild. My sound design workflow went actually from 5 hours to 20 minutes. We are launching this in February (fingers crossed for the approval at aescripts+aeplugins) If you want to see where this goes and try it out yourself, drop me a DM

Markus Gavrilov

20,299 views • 8 months ago

New open source project: Easel, a macOS workspace for AI-assisted product design and frontend iteration powered by the Codex SDK. Think of it as "Claude Design for Codex." It brings together a local project library, design-system setup, Codex chat, and a live web preview with a point-and-click inspector. Set up your design system however you like. Import one from Figma , bring your own, or have the agent generate it as a design.md. Then use it to build prototypes and slide decks. Codex-first, with Claude and other AI providers and local models planned for future releases. OpenAI Developers

New open source project: Easel, a macOS workspace for AI-assisted product design and frontend iteration powered by the Codex SDK. Think of it as "Claude Design for Codex." It brings together a local project library, design-system setup, Codex chat, and a live web preview with a point-and-click inspector. Set up your design system however you like. Import one from Figma , bring your own, or have the agent generate it as a design.md. Then use it to build prototypes and slide decks. Codex-first, with Claude and other AI providers and local models planned for future releases. OpenAI Developers

James Rochabrun

61,608 views • 3 months ago

Rewind to 1990 and the introduction of the Trackball - the first redesign of the original Bloomberg keyboard. ⏪👋 It was a modern marvel in its day. Equipped with built-in voice-chat features and a compact design, the keyboard enabled easy and quick Terminal functionality.

Rewind to 1990 and the introduction of the Trackball - the first redesign of the original Bloomberg keyboard. ⏪👋 It was a modern marvel in its day. Equipped with built-in voice-chat features and a compact design, the keyboard enabled easy and quick Terminal functionality.

Bloomberg

37,170 views • 2 years ago

I was ready to tear my (remaining) hair out. Every shadcn UI kit for Figma I found on Figma Community was of poor quality, missing components or outdated. 😡 My client's deadline loomed, and I needed a solution fast... That's when inspiration struck. With my seven years of experience creating Figma resources and managing the Ant Design System, why not make the kit myself? 🤔 I dove in, pouring my expertise into every component. Days blended as I crafted, refined, and perfected. 🥵 Finally, I sat back and smiled. Before me was the high-quality, up-to-date Shadcn UI kit I'd been searching for, complete with customer support. 🤩 As I prepared to share it with the world, I felt a surge of excitement. This wasn't just a solution to my problem – it was a resource that could help thousands of other designers and developers. It’s not a dream. I made it.

I was ready to tear my (remaining) hair out. Every shadcn UI kit for Figma I found on Figma Community was of poor quality, missing components or outdated. 😡 My client's deadline loomed, and I needed a solution fast... That's when inspiration struck. With my seven years of experience creating Figma resources and managing the Ant Design System, why not make the kit myself? 🤔 I dove in, pouring my expertise into every component. Days blended as I crafted, refined, and perfected. 🥵 Finally, I sat back and smiled. Before me was the high-quality, up-to-date Shadcn UI kit I'd been searching for, complete with customer support. 🤩 As I prepared to share it with the world, I felt a surge of excitement. This wasn't just a solution to my problem – it was a resource that could help thousands of other designers and developers. It’s not a dream. I made it.

Matt

190,401 views • 2 years ago

Someone figured out why every AI-coded site looks the same, and shipped the fix. Most common attributes of an AI generated website: - Purple gradient at the top - Rounded cards - Frosted glass look - Inter font - Emoji as icons And a prompt: "Transform your workflow" to get the same thing 10,000 others got. not everything is the model's fault. - your prompt has no strong opinions about design, so it defaults to the statistical average of every landing page it's ever seen. the particular repo is a strict design rules as SKILL.md / .cursorrules files that force the agent to actually decide. - Open-source markdown that you drop into your project. I used it for my own site in some sections: Access GitHub repo and Guide: Site:

Someone figured out why every AI-coded site looks the same, and shipped the fix. Most common attributes of an AI generated website: - Purple gradient at the top - Rounded cards - Frosted glass look - Inter font - Emoji as icons And a prompt: "Transform your workflow" to get the same thing 10,000 others got. not everything is the model's fault. - your prompt has no strong opinions about design, so it defaults to the statistical average of every landing page it's ever seen. the particular repo is a strict design rules as SKILL.md / .cursorrules files that force the agent to actually decide. - Open-source markdown that you drop into your project. I used it for my own site in some sections: Access GitHub repo and Guide: Site:

Veee

107,153 views • 24 days ago

🎥 Watch the full transformation of my dream craft room now on YouTube: 💞 Designed with my ADHD in mind, every detail was created to help me stay focused, inspired, and creative 🎨✨ With the help of the amazing experts at UnderstoodOrg, my incredible design team, and my partners at Android, I learned how to make this space as functional as it is beautiful — from the layout to the lighting to the way everything’s organized and tech to help me be creative 💫 I finally have a place to display some of my favorite art and feel inspired every time I walk in 💖 Can’t wait to start creating in here 🪩🌈 #ADHDAwarenessMonth #SlivingWithADHD #InclusiveByDesign

🎥 Watch the full transformation of my dream craft room now on YouTube: 💞 Designed with my ADHD in mind, every detail was created to help me stay focused, inspired, and creative 🎨✨ With the help of the amazing experts at UnderstoodOrg, my incredible design team, and my partners at Android, I learned how to make this space as functional as it is beautiful — from the layout to the lighting to the way everything’s organized and tech to help me be creative 💫 I finally have a place to display some of my favorite art and feel inspired every time I walk in 💖 Can’t wait to start creating in here 🪩🌈 #ADHDAwarenessMonth #SlivingWithADHD #InclusiveByDesign

Paris Hilton

26,453 views • 11 months ago

I made it in SF with zero dollars, skills, or network In fact I was so screwed that I - sold White Claws for rent - became the target of a violent gang - learned design from scratch But im not a pussy, so soon after I got lots of job offers How to make it in SF with NOTHING

I made it in SF with zero dollars, skills, or network In fact I was so screwed that I - sold White Claws for rent - became the target of a violent gang - learned design from scratch But im not a pussy, so soon after I got lots of job offers How to make it in SF with NOTHING

Thomas Schulz

99,837 views • 11 months ago

So my elder brother booked an appointment for me at the The Perfume Bar 🇳🇬 and it was a most amazing experience. You get to choose your scent and make your own perfume. Then give it a name of your choosing. I had fun doing it. The beauty of it is that, no one gets to smell like you 😊 It is a beautiful place with a beautiful experience, and a wonderful customer service. You should go with your friend or partner.

So my elder brother booked an appointment for me at the The Perfume Bar 🇳🇬 and it was a most amazing experience. You get to choose your scent and make your own perfume. Then give it a name of your choosing. I had fun doing it. The beauty of it is that, no one gets to smell like you 😊 It is a beautiful place with a beautiful experience, and a wonderful customer service. You should go with your friend or partner.

Sir Dickson

34,628 views • 8 months ago