Profile

Enterprise Pricing FAQ

Sign In Sign Up

v0 - rauch-g - v0 by Vercel

Guillermo Rauch

@rauch-g

Activity

Showcase

A cool interactive particle animation of two SVG logos

Logo particles (v0 + aws)

This application is an ASCII Art Converter that allows users to transform images into ASCII art representations. Users can upload images either by dragging and dropping them into the application or by using a file input. The app supports various character sets for ASCII art, including standard, detailed, block characters, and minimal options.

To use the app, users can adjust the resolution of the ASCII art using a slider, toggle options for color inversion and grayscale mode, and select their preferred character set from a dropdown menu. Once an image is loaded, the app automatically converts it into ASCII art based on the selected settings. The resulting ASCII art is displayed in a preview area, where users can also see colored ASCII art if the grayscale option is disabled.

Key features of the app include:
- Image upload via drag-and-drop or file selection.
- Adjustable resolution for ASCII art output.
- Multiple character set options for different styles of ASCII art.
- Options to invert colors and switch to grayscale mode.
- Copy to clipboard functionality for easy sharing of the generated ASCII art.
- Download option to save the ASCII art as a text file.

The application is built using React and TypeScript, leveraging hooks for state management and effects. It utilizes a canvas element for image processing and rendering, and it incorporates UI components for sliders, buttons, and select menus. The app is designed to be responsive, adapting its layout for both desktop and mobile users.

A Bloomberg Terminal inspired UI with dark and light mode

Bloomberg-like Terminal

A Grok-inspired chat UI featuring vibration on iOS, scroll anchoring for messages, and a minimalistic style.

Chat UI with Vibration

An OpenAI-style circles pattern drawn dynamically and in realtime over your webcam input

An org chart in a Figma-like draggable canvas with zoom controls

React Org Chart

Alignment Chart

Alignment Chart

Airbnb-style navigation that features animated icons

Horizontal nav example

This application is a 3D car viewer that allows users to interact with a 3D model of a cartoon pony car. The app utilizes React and Three.js to render the model in a web environment, providing an immersive experience where users can rotate, zoom, and pan around the model.

To use the app, users simply navigate to the webpage where the viewer is hosted. The 3D model is displayed in a full-screen canvas, and users can manipulate the view using mouse controls. The application also features a post-processing effect that applies dithering to the rendered scene, enhancing the visual aesthetics of the model.

The key technologies involved in this application include React for building the user interface, Three.js for rendering 3D graphics, and GLSL for implementing the dithering shader effect. The app leverages the @react-three/fiber library to integrate Three.js with React, allowing for a seamless development experience.

Key features of the app include:
- Interactive 3D model viewing with orbit controls for rotation and zooming.
- A dithering effect that enhances the visual quality of the model by applying a pixelation style.
- Responsive design that adjusts to different screen sizes.
- A loading state to improve user experience while the model is being prepared for display.
- Attribution to the model creator and the shader developer, ensuring proper credit is given.

Overall, this app serves as a demonstration of modern web technologies for rendering 3D graphics and provides an engaging way for users to explore a digital model.

Car 3D rendering

This application is an interactive sound visualization tool that creates an audio-reactive ASCII ball animation. It captures audio input from the user's microphone and generates a visual representation of the sound in real-time. The app utilizes a canvas to draw a ball that reacts to audio frequencies and volume, while also displaying the output as ASCII art.

To use the app, users simply need to grant microphone access when prompted. The application will then analyze the audio input and create a dynamic visual display. The ball's size and color will change based on the audio's volume and frequency, while particles will be emitted in response to sound intensity. The ASCII representation of the visual will be updated continuously, providing a unique blend of audio and visual art.

The app is built using TypeScript and React, leveraging the Next.js framework for server-side rendering and routing. It employs the Tailwind CSS framework for styling, ensuring a responsive and modern design. The audio processing is handled using the Web Audio API, which allows for real-time audio analysis and manipulation.

Key features of the app include:
- Real-time audio visualization that responds to microphone input.
- Dynamic ASCII art representation of the audio visualization.
- Particle effects that enhance the visual experience based on sound intensity.
- Smooth animations and transitions for a visually appealing output.
- Responsive design that adapts to different screen sizes.

Overall, this application serves as an engaging tool for users to experience sound in a visually captivating way, combining technology and creativity.

Interactive sound ball

An Apple style carousel with dots that uses CSS built-in snapping

Apple Style Carousel

The NotesApp is a web-based application designed to provide users with a visually appealing and interactive platform for managing notes. The app features a modern, animated user interface that enhances user engagement and experience.

To use the app, users can navigate through a landing page that showcases the main functionalities. The interface includes a mobile mockup that simulates a note-taking application, allowing users to visualize their notes in a mobile format. Users can interact with various note items, each represented by animated cards that respond to hover actions, providing a dynamic experience. The app also includes buttons for entering "Build Mode" or "Stay App," which guide users to different functionalities.

The application is built using TypeScript and React, leveraging the capabilities of modern web development frameworks. It utilizes Tailwind CSS for styling, ensuring a responsive and visually consistent design across different devices. The app incorporates animations and transitions to create a lively user experience, using CSS keyframes for effects such as floating elements, loading bars, and button glows.

Key features of the NotesApp include:
- A visually engaging landing page with animated background elements.
- A mobile mockup that displays notes in a realistic format.
- Interactive note items that feature hover effects and animations.
- Responsive design that adapts to various screen sizes.
- Buttons for navigating between different modes of the app.
- A modern aesthetic achieved through the use of Tailwind CSS and custom animations.

Overall, the NotesApp combines functionality with an engaging user interface, making it an effective tool for note management.

Mobile app website

This app is a slide deck presentation tool designed to explore the concept of "Software 3.0," focusing on the evolution of programming paradigms and the implications of large language models (LLMs) in software development. The app provides a minimalist interface for users to navigate through a series of informative slides that cover various topics related to the new programming landscape.

To use the app, users can navigate through the slides using arrow keys or on-screen buttons. The app supports both keyboard and touch navigation, allowing for a seamless experience on different devices. Users can swipe left or right on touch devices to move between slides, and the app includes visual indicators for the current slide and overall progress.

The app is built using TypeScript and React, leveraging the Next.js framework for server-side rendering and routing. It utilizes Tailwind CSS for styling, ensuring a responsive and visually appealing design. The slide content is structured using React components, allowing for easy customization and scalability.

Key features of the app include:
- A series of slides that cover topics such as the evolution of software paradigms, the role of LLMs as operating systems, and the democratization of programming through natural language.
- Smooth transitions between slides, enhancing the user experience.
- Keyboard and touch navigation support, making it accessible on various devices.
- A progress bar that visually indicates the user's position within the slide deck.
- Customizable slide components that can include titles, subtitles, icons, and rich content.

Overall, this app serves as an educational tool for developers and tech enthusiasts to understand the changing landscape of software development in the context of AI and LLMs.

Minimalist slides deck

This app is a scroll-based video player that allows users to interactively play a series of videos by scrolling through the page. The app is designed to provide a seamless experience where the playback of videos is synchronized with the user's scroll position, creating an engaging and dynamic viewing experience.

To use the app, users simply scroll down the page to play the videos. As they scroll, the app calculates the scroll progress and adjusts the playback of the videos accordingly. Each video plays in sequence based on how far the user has scrolled, and the current video is displayed prominently while others fade out. A visual scrollbar indicates the user's progress through the video content.

The app is built using modern web technologies, including React for the user interface and Next.js for server-side rendering and routing. It utilizes TypeScript for type safety and improved developer experience. The videos are hosted on a cloud storage service, and the app employs URL rewrites to manage video sources efficiently.

Key features of the app include:
- Scroll-based video playback that synchronizes with the user's scroll position.
- Dynamic loading of video metadata to ensure smooth playback.
- Touch device support with scroll snap functionality for a better mobile experience.
- A loading screen that informs users while videos are being prepared.
- Visual indicators such as a scrollbar and video titles to enhance user interaction.
- Error handling for video loading issues to ensure a robust experience.

Overall, this app provides an innovative way to experience video content, leveraging scrolling as a means of control and engagement.

Custom video player

An image editing tool that lets you create a magnifying glass effect

Image Magnifier

This application is a 3D book showcase that allows users to interact with and explore various book models in a visually engaging manner. The app utilizes WebGL and Three.js for rendering 3D graphics, along with React and TypeScript for building the user interface and managing application state.

Users can navigate through a collection of books, each represented by a 3D model. The application features a rotating book animation that users can control using left and right buttons, allowing them to flip through the available titles. Each book displays detailed information, including the title, author, publication year, page count, genres, and a description. Users can also see the book's cover and back cover textures, which are dynamically loaded and applied to the 3D model.

Key features of the app include:
- A responsive design that adjusts the camera's field of view based on the screen size, ensuring an optimal viewing experience on various devices.
- Texture preloading to enhance performance by loading book cover images before they are needed.
- A debug panel for developers to manipulate the book's material properties, such as color, metalness, roughness, and emissive properties, as well as to generate UV mappings for the book covers.
- Dynamic text color transitions that adapt based on the selected book's theme, enhancing the visual appeal of the interface.
- Keyboard navigation support, allowing users to flip through books using arrow keys.

The application is built using modern web technologies, including React for the component structure, Three.js for 3D rendering, and TypeScript for type safety. It also employs hooks for state management and effects, ensuring a smooth and interactive user experience. Overall, this app serves as an innovative platform for showcasing books in a 3D environment, combining aesthetics with functionality.

Book rendering design

This app is designed to create an interactive visual experience using WebGL technology. It features a canvas that displays a text distortion effect, which responds dynamically to mouse movements. The primary purpose of the app is to showcase a unique visual effect where text appears to distort and magnify based on the user's cursor position, providing an engaging and immersive interaction.

To use the app, users simply need to navigate to the web page where it is hosted. Once the page loads, they can move their mouse over the canvas area to see the text distortion effect in action. The app is responsive and adjusts the canvas size based on the user's screen dimensions, ensuring a consistent experience across different devices.

The app is built using TypeScript and React, leveraging the Next.js framework for server-side rendering and routing. It utilizes WebGL for rendering graphics, allowing for complex visual effects such as texture mapping and shader programming. The app incorporates custom shaders written in GLSL (OpenGL Shading Language) to achieve the distortion effects, including features like iridescence, scanlines, phosphor glow, and vignette effects.

Key features of the app include:
- Interactive text distortion that responds to mouse movements.
- Dynamic resizing of the canvas based on the viewport size.
- Custom shaders for advanced visual effects.
- A fallback mechanism to ensure consistent text display even if the special text cannot be rendered.
- Touch support for mobile devices, allowing users to interact with the canvas using touch gestures.

WebGL Distortion Effect