Profile

Enterprise Pricing FAQ

Sign In Sign Up

v0 - yadwinder - v0 by Vercel

Yadwinder Singh

@yadwinder

Freelance Product Designer

@ydwndr

yadwinder.com

Activity

Showcase

I built this template in v0 to make it easy to customize and feel good to use. It’s simple, clean, and responds fast when you change things.

Sections in this template: Hero, Features, Pricing, Testimonials, Call to Action, Footer

Here’s what’s in it:

• Change the whole theme with a one message
You can switch from light to dark or anything else just by typing a prompt. No settings panel, no config files.

• Smooth, natural animations
Stuff fades in, slides in, or shifts in ways that feel right. Nothing jerky or overdone.

• Clean layout and spacing
Everything is placed with breathing room. No clutter. It feels calm.

• Mobile-ready without effort
It looks great on phones and tablets out of the box.

• Quick to start with, easy to edit
You can make it your own in minutes. And it doesn’t fall apart when you do.

Pointer AI landing page

A template for v0.

Cuisine Selector Chips

An engaging animation of a toast notification featuring a loading state, seamlessly transitioning into a success state. Perfect for UI feedback interactions!

recreated vercel tabs entirely with prompts

tooltip smootly moves to item being hovered

Built a tool in V0 that lets you drag to seamlessly reveal Light, Dark, and Image transition themes. Perfect for showcasing dynamic design interactions!

Light Dark Image Transition

Spotted a delightful animation on the @vercel website and wondered: Can we recreate this in @v0? The answer is a resounding yes—check out this seamless implementation!

https://vercel.com/ai

Animated Music Player

A sleek interaction where blocks smoothly transition to highlight the hovered item, dynamically adjusting their width to emphasize focus.

A template for v0.

Oklch Color Picker

This application is a versatile image management tool designed for users to upload, manipulate, and display images in various formats. It features three main components: an Image Canvas, an Auto Carousel, and an Infinite Slideshow, each providing unique functionalities for image interaction and presentation.

The Image Canvas allows users to upload multiple images, which can then be positioned and zoomed in/out using mouse controls. Users can drag images to reposition them on the canvas and double-click to zoom in on specific images. The canvas supports scrolling effects to enhance visibility and user engagement.

The Auto Carousel presents images in a horizontally scrolling format, allowing users to upload new images dynamically. It utilizes a carousel library to create a smooth, animated experience, displaying images in rows that can be scrolled through effortlessly.

The Infinite Slideshow offers a continuous scrolling experience for images, where users can add images to different rows. This component duplicates the images for a seamless looping effect, ensuring that the slideshow appears infinite.

To use the app, users can click on designated buttons to upload images from their devices. The app is built using React and TypeScript, leveraging Next.js for server-side rendering and routing. It employs various libraries, including Lucide for icons and Embla Carousel for the carousel functionality. The user interface is styled using Tailwind CSS, ensuring a responsive and modern design.

Key features of the app include:
- Image upload functionality with drag-and-drop support.
- Zoom and pan capabilities on the Image Canvas.
- Dynamic image addition to the Auto Carousel and Infinite Slideshow.
- Smooth animations and transitions for an engaging user experience.
- Responsive design that adapts to different screen sizes.

Overall, this application serves as a comprehensive solution for users looking to manage and display images interactively and aesthetically.

Simple Portfolio

Track fitness progress beyond daily goals with dynamically expanding Activity rings

Apple watch activity rings

Email Change

The app is a customizable dashboard named "Brillance" that allows users to manage their settings and preferences, particularly focusing on theme customization. It is built using React and TypeScript, leveraging the Next.js framework for server-side rendering and routing. The app utilizes the Next Themes library to provide dynamic theme switching capabilities, allowing users to choose between light, dark, or system default themes.

To use the app, users can navigate to the settings page where they will find options to customize their dashboard's appearance. The interface includes a sidebar for navigation and a main content area where users can adjust their theme settings. Users can select their preferred theme by clicking on visual cards that represent each theme option, and they can also set accent colors and animation speeds for transitions within the app.

Key features of the app include:
- A responsive layout that adapts to different screen sizes.
- A theme provider that manages the current theme and allows for easy switching.
- A settings page that provides options for personal information, default configurations, and theme settings.
- Visual previews of each theme option to help users make informed choices.
- Customizable accent colors and animation speeds to enhance user experience.
- A sidebar for easy navigation between different sections of the dashboard.

The app is styled using Tailwind CSS, which allows for rapid UI development and ensures a consistent design across different components. The use of utility classes facilitates easy customization and responsiveness. Overall, "Brillance" aims to provide a user-friendly interface for managing dashboard settings with a focus on personalization and accessibility.

Custom dashboard recreation

This app is a web-based interface designed to showcase a security solution that adapts and scales with user needs. The primary function of the app is to present engaging content through a visually appealing hover effect that reveals information dynamically as users interact with the interface.

To use the app, users simply navigate to the main page where they will find a centered display area. As users hover over the text, a vertical reveal effect occurs, enhancing the visual experience and drawing attention to the key message: "Security that scales with you." The app is built using TypeScript and React, leveraging modern web development practices to create a responsive and interactive user experience.

Key technologies involved in the development of this app include React for building the user interface, TypeScript for type safety and improved developer experience, and CSS for styling and layout. The app utilizes a custom component called HoverRevealVertical, which manages mouse interactions to create a smooth hover effect. This component tracks the mouse position and adjusts the display of text and background elements accordingly, providing a dynamic visual feedback loop.

Key features of the app include:
- A responsive design that adapts to different screen sizes.
- A hover effect that reveals text in a visually engaging manner.
- A clean and modern aesthetic with a dark background and contrasting text colors.
- Smooth transitions and animations that enhance user interaction.

Overall, this app serves as a compelling demonstration of how interactive design can effectively communicate important messages in a user-friendly manner.

Vercel hover effect