Community

Sign In Sign Up

Community

Discover the best apps, components and starters from the community.

Search

By messaging v0, you agree to our Terms and AI Policy.

Pricing Enterprise FAQ

Privacy Vercel Community Vercel

...

This is an animated cart button that helps users add items to carts in batches

Animated Cart Button

Animated Toolbar

Animated Toolbar

Expanding Cards

Expanding Cards

tooltip smootly moves to item being hovered

The System Monitor app is a real-time resource monitoring tool designed to provide users with insights into their system's performance. It tracks various metrics, including CPU, GPU, VRAM, network usage, and memory consumption, displaying this information in an intuitive and visually appealing manner.

To use the app, users simply need to launch it in a web environment. The app automatically generates and updates resource data every second, simulating real-time monitoring. Users can interact with the interface by hovering over different components to see detailed information, and they can expand the view to access more granular data about system memory and per-agent memory usage.

The app is built using TypeScript and React, leveraging the Framer Motion library for smooth animations and transitions. It utilizes SVG graphics for rendering sparkline charts that visualize resource usage over time. The user interface is styled with a focus on clarity and responsiveness, ensuring that users can easily interpret the data presented.

Key features of the System Monitor app include:
- Real-time tracking of system resources with automatic updates.
- Visual representation of data through sparkline charts, highlighting spikes in resource usage.
- Interactive elements that provide additional information on hover.
- A collapsible interface that allows users to expand and view detailed memory usage per agent.
- A clean and modern design that enhances user experience.

Overall, the System Monitor app serves as a valuable tool for developers and system administrators who need to keep an eye on system performance and resource allocation.

System resource widget

The SnapThumb app is a web-based tool designed to extract and download high-quality thumbnails from YouTube videos. It allows users to input a single YouTube video URL or multiple URLs in a batch format, and then provides options to download the thumbnails in various resolutions.

To use the app, users can either paste a YouTube video URL into the designated input field or enter multiple URLs, each on a new line. After entering the URLs, users can click the "Extract" button to process the videos. The app will display the available thumbnail options, allowing users to choose their preferred quality (maximum, standard, high, or medium) for download. Users can also copy the direct image URLs to their clipboard.

The app is built using modern web technologies, including Next.js for server-side rendering and React for building user interfaces. It utilizes Tailwind CSS for styling, ensuring a responsive and visually appealing design. The app also incorporates various UI components from Radix UI, such as buttons, cards, and tabs, to enhance user experience.

Key features of SnapThumb include:
- Support for both single and batch URL inputs.
- Options to download thumbnails in multiple resolutions.
- A user-friendly interface with loading indicators and error handling.
- Clipboard functionality for easy URL copying.
- Recent download history management, allowing users to revisit previously processed video IDs.

Overall, SnapThumb is a free, fast, and easy-to-use tool for anyone looking to download YouTube thumbnails efficiently.

Next level thumbnail downloader

This application is a visually engaging snow effect simulator that overlays animated snowflakes and lens drops on a background image. It is designed to create a dynamic winter scene, enhancing the visual appeal of web pages or applications.

To use the app, users simply need to integrate it into their React application. The main component, SnowScene, requires an image URL and an optional alt text for the image. The app automatically adjusts to the dimensions of the container it is placed in, ensuring a responsive design. Users can interact with a control panel to customize various parameters of the snow effect, including the number of snowflakes, their size, speed, wind strength, and blur amount. Additionally, users can enable or disable a lens drop effect, which simulates the appearance of water droplets falling.

The app is built using TypeScript and React, leveraging hooks such as useEffect and useState for managing state and lifecycle events. The snowflakes are rendered using a combination of canvas and SVG elements, allowing for smooth animations and visual effects. The application also employs CSS animations for the falling snowflakes and lens drops, providing a fluid and immersive experience.

Key features of the app include:
- Customizable snowflake parameters through a user-friendly control panel.
- Responsive design that adapts to different screen sizes.
- Animated snowflakes that fall from the top of the screen, with varying sizes, speeds, and opacities.
- An optional lens drop effect that adds realism to the snow scene.
- Efficient rendering using both canvas and SVG for optimal performance.

Overall, this app serves as a creative tool for developers looking to enhance their web applications with a winter-themed visual effect.

Snow effect for image

This app is a comprehensive web platform designed to facilitate business growth through innovative technology solutions. It offers a range of services including web development, mobile app development, mechanical engineering, digital systems, and more. The app is built using modern web technologies such as React, Next.js, and TypeScript, ensuring a responsive and user-friendly experience.

Users can navigate through various sections, including a dashboard that provides insights into project metrics, a services section that showcases the offerings, and a consultation page for potential clients to inquire about services. The app features a dynamic user interface with animations powered by Framer Motion, enhancing user engagement.

Key features of the app include:
- A responsive design that adapts to different screen sizes.
- A service selection card that guides users through a consultation process, allowing them to specify their business needs and goals.
- An AI-powered chat assistant that provides instant support and answers to user inquiries.
- A project showcase that highlights successful client projects, complete with metrics and testimonials.
- A partnership program that offers exclusive benefits for businesses looking to collaborate.

To use the app, users can navigate through the main sections via a top navigation bar. They can explore services, view project details, and initiate consultations. The app also includes a footer with contact information and links to social media, ensuring users can easily reach out for support or inquiries.

Overall, this app serves as a powerful tool for businesses seeking to leverage technology for growth and innovation, providing a seamless experience from initial inquiry to project completion.

The Signature Maker app is a web-based tool designed to help users create personalized digital signatures quickly and easily. It offers two primary methods for signature creation: typing a name with customizable font options or drawing a signature by hand using a digital canvas.

To use the app, users can select between the "Type Signature" and "Draw Signature" tabs. In the typing mode, users can enter their name, choose from a variety of font styles, adjust the font size, and select a color for their signature. The app provides a live preview of the signature on a canvas. In the drawing mode, users can select a brush size and color, and then draw their signature directly on the canvas. The app captures the drawing in real-time, allowing for a natural signature creation experience.

The app is built using React and TypeScript, leveraging various libraries such as Radix UI for UI components, Lucide for icons, and custom utility functions for styling. Key features include a selection of multiple font styles, a color palette for customization, adjustable brush sizes for drawing, and the ability to download the created signature as a high-quality PNG file.

Additional functionalities include a clear canvas option to reset the signature area and a responsive design that ensures usability across different devices. Overall, the Signature Maker app provides a user-friendly interface for creating unique digital signatures tailored to individual preferences.

Signature website design

The Fortress Institute app is a comprehensive platform designed for individuals seeking training in Computer-Aided Design (CAD), Computer-Aided Manufacturing (CAM), and Computer Numerical Control (CNC) technologies. The app serves as a digital hub for prospective students to explore various courses, access information about the institute, and engage with support services.

Users can navigate through several key features, including a homepage that highlights the institute's offerings, statistics on student success, featured courses, testimonials from alumni, and a call-to-action for booking free demo classes. The app is built using TypeScript and React, leveraging Next.js for server-side rendering and routing, and incorporates various UI components for a responsive design.

The app includes dedicated pages for courses, where users can filter and view detailed information about each program, including duration, pricing, and features. An about page provides insights into the institute's history, mission, and quick facts, while a blog section keeps users updated on industry trends and educational content.

For prospective students, the placement page outlines the institute's placement assistance services, showcasing success stories and partnerships with leading companies. A contact page facilitates communication, allowing users to fill out a form or view contact information for inquiries.

Key features of the app include:
- A responsive design that adapts to various devices.
- A chat support system for real-time assistance.
- Integration of a notification system to engage users.
- A user-friendly interface for browsing courses and accessing information.
- A dedicated admin panel for managing chat support and analytics.

Overall, the Fortress Institute app aims to provide a seamless experience for users looking to enhance their skills in CAD, CAM, and CNC technologies, while also ensuring they receive the necessary support throughout their educational journey.

The DeckMixer app is a privacy-focused cryptocurrency mixer designed for the Solana blockchain. It allows users to mix their SOL and SPL tokens, breaking the on-chain link between source and destination addresses to enhance transaction privacy. The app utilizes advanced cryptographic techniques, including zero-knowledge proofs, to ensure that users can conduct transactions without revealing sensitive information.

To use the app, users connect their Solana wallet and specify the amount and type of tokens they wish to send. They can also select the recipient's wallet address and choose optional privacy settings, such as time delays for withdrawals and pool sizes. The app calculates the approximate amount of tokens the user will receive after applying a small transaction fee. Once the user confirms the transaction, they are directed to a deposit page where they can send the specified amount to a designated mixing wallet address.

The app is built using modern web technologies, including TypeScript and React, and employs a user-friendly interface with components for input fields, buttons, and sliders. It also features a price display that updates in real-time, showing the current value of supported tokens. The app's design incorporates responsive layouts and animations to enhance user experience.

Key features of DeckMixer include:
- Privacy-preserving transactions using zero-knowledge proofs.
- Non-custodial design, ensuring users maintain control of their funds.
- Support for multiple tokens, including SOL, USDC, USDT, and BONK.
- Optional time-delayed withdrawals to enhance privacy.
- A user-friendly interface with real-time price updates and transaction confirmations.

Overall, DeckMixer aims to provide a secure and efficient solution for users seeking to maintain their financial privacy while transacting on the Solana blockchain.

Solana Mixer Website

Coffee Machine Animation

Vercel Coffee Machine

FootballHub is a comprehensive mobile application designed for football enthusiasts, providing real-time updates on live scores, news, and fixtures for various football leagues. The app allows users to stay informed about their favorite teams and players, offering a personalized experience based on user preferences.

To use the app, users can navigate through a user-friendly interface that includes a navigation bar at the top and a tab bar at the bottom for easy access to different sections. The main features include live scores, a news section, upcoming fixtures, and a favorites section where users can manage their preferred teams and players. Users can also enable notifications to receive updates on important events such as goals and match starts.

The application is built using modern web technologies, including TypeScript and React, with a focus on responsive design using Tailwind CSS for styling. It utilizes Next.js for server-side rendering and routing, ensuring fast load times and a smooth user experience. The app also incorporates a service worker for offline capabilities and caching, enhancing performance and reliability.

Key features of FootballHub include:
- Live Scores: Real-time updates on ongoing matches, displaying scores, match time, and league information.
- News Section: Latest news articles related to football, including match reports and player highlights.
- Fixtures Section: Information on upcoming matches, including dates, times, and participating teams.
- Favorites Section: A customizable area where users can save their favorite teams and players for quick access.
- Notifications: Users can opt-in to receive alerts for significant match events.
- Onboarding Process: A guided setup to help users select their favorite teams and enable notifications upon first use.

Overall, FootballHub aims to deliver a rich and engaging experience for football fans, keeping them connected to the sport they love.

Rollout Strategy

Rollout Strategy

Deposit Dashboard

Deposit Dashboard

Receipt Minimal UI Design

Receipt Minimal UI Design

This application is a modern web platform designed to showcase the services and expertise of a creative agency specializing in digital solutions, including AI services, web development, and design. The app features a visually appealing interface that utilizes animations and transitions to enhance user experience.

Users can navigate through various sections, including a hero section that introduces the agency, a portfolio grid displaying past projects, a timeline of the agency's journey, and a contact form for inquiries. The app also includes a newsletter subscription feature, allowing users to stay updated with the latest news and offerings.

To use the app, users can scroll through the homepage to explore different sections, click on links to navigate to specific areas, and fill out forms to get in touch or subscribe to the newsletter. The app is built using React with TypeScript, leveraging Next.js for server-side rendering and routing. It employs Tailwind CSS for styling, ensuring a responsive and modern design. Additionally, Framer Motion is used for animations, providing smooth transitions and interactive elements.

Key features of the app include:
- A dynamic hero section with engaging animations that highlight the agency's focus on AI solutions.
- A portfolio grid that showcases various projects with descriptions and images, allowing users to filter by category.
- A timeline that narrates the agency's history and milestones, enhancing storytelling.
- A contact form with validation to facilitate user inquiries, along with a newsletter subscription form.
- A responsive design that adapts to different screen sizes, ensuring accessibility across devices.
- Custom cursor and floating action button for improved navigation and user interaction.

Overall, this application serves as a comprehensive digital presence for the agency, effectively communicating its services and engaging potential clients.

Creative Agency Portfolio

ITS YA BOY SHOWERHEAD HERE WITH ANOTHER HOT COMPONENT

It does all the stuff below I guess but in reality, its just pretty while I was messing around

```
This application is a timeline management tool designed to help users visualize and manage project phases and tasks. It allows users to create, edit, and navigate through various steps in a project timeline, providing a clear overview of progress and upcoming tasks.

To use the app, users can interact with a horizontal or vertical timeline interface. Each timeline step can be clicked to reveal more details, including text descriptions, tables, and references. Users can add new steps, edit existing ones, and navigate through the timeline using previous and next buttons. The interface is responsive, adapting to different screen sizes, and includes animations for a smooth user experience.

The app is built using modern web technologies, including React for the user interface, TypeScript for type safety, and Tailwind CSS for styling. It leverages libraries such as Framer Motion for animations, Lucide React for icons, and DnD Kit for drag-and-drop functionality. The application also utilizes context for state management, allowing for efficient updates and rendering of components.

Key features of the app include:
- A responsive timeline that can be oriented horizontally or vertically.
- Interactive timeline steps that can be expanded to show detailed content.
- The ability to add new steps and edit existing ones, including inline editing for titles and content.
- Support for various content types within timeline steps, including text nodes, tables, and reference nodes with tooltips.
- Navigation buttons to move through the timeline.
- Animated transitions and effects to enhance user interaction.
- A clean and modern design that utilizes dark mode and customizable styles.

Overall, this app serves as a comprehensive tool for project management, enabling users to track progress and manage tasks effectively within a visually appealing interface.

```

Horizontally scrollable timeline

Financial Dashboard

Financial Dashboard

This application is a web-based platform designed for Chiloane Holdings, a South African youth-led holding company focused on empowering the digital, financial, and creative economy of Africa. The app serves as an interactive showcase of the company's divisions, projects, and performance metrics, providing users with a visually engaging experience.

Users can navigate through various sections, including an overview of the company, detailed descriptions of its divisions, performance charts, and a contact form. The app features a hero section with a dynamic particle background and animated counters that highlight key statistics about the company. Each division is represented with an icon and a description, detailing the services offered.

The app utilizes modern web technologies, including React for building user interfaces, TypeScript for type safety, and Tailwind CSS for styling. It also incorporates Framer Motion for animations, enhancing the user experience with smooth transitions and interactive elements. The responsive design ensures that the app is accessible on both desktop and mobile devices.

Key features of the app include:
- A particle background animation that creates a visually appealing hero section.
- Animated counters that dynamically display statistics related to the company's divisions and projects.
- A performance chart component that visualizes revenue projections and division growth using bar and pie charts.
- An info slider that narrates the company's story, mission, and future aspirations through engaging slides.
- A contact section with a form for users to reach out, along with social media links for further engagement.

Overall, the app effectively communicates the vision and offerings of Chiloane Holdings while providing an interactive and informative experience for users.

Chiloane Holdings

Type Jaldi is a web application designed to help users improve their typing skills through engaging typing tests. The app allows users to select their username, configure test options such as time limits and word counts, and track their performance in real-time.

To use the app, users start by entering their username, which personalizes their experience. They can then choose from various test options, including different time limits (ranging from 10 seconds to 5 minutes) and text lengths (short, medium, or long). Once the test begins, users type a provided passage while the app tracks their words per minute (WPM), accuracy, and errors. After completing the test, users receive a detailed report of their performance, including a rating based on their WPM and accuracy.

The app is built using modern web technologies, including TypeScript and React for the frontend, and utilizes libraries such as Framer Motion for animations and Lucide React for icons. The user interface is designed with a focus on aesthetics and usability, featuring customizable themes that enhance the visual experience.

Key features of Type Jaldi include:
- User-friendly interface for entering usernames and selecting test options.
- Real-time tracking of typing performance, including WPM, accuracy, and error count.
- Dynamic feedback and ratings based on user performance.
- Customizable themes to enhance the visual experience.
- A leaderboard showcasing the last ten users and their performance metrics.
- Responsive design that adapts to various screen sizes.

Overall, Type Jaldi aims to provide a fun and effective way for users to practice and improve their typing skills while enjoying a visually appealing and interactive experience.

The LiveStatusAPI application is designed to provide real-time presence tracking and engagement analytics for users. It allows developers to monitor user activity, predict response times, and analyze engagement trends through a comprehensive API.

To use the app, users can register for an account, log in, and access a dashboard that displays various metrics related to user presence and engagement. The dashboard features several components, including a presence overview pie chart, an engagement line chart, and a recent activity feed. Users can filter and search for specific users, manage their presence statuses, and view detailed analytics.

The application is built using modern web technologies, including TypeScript, React, and Next.js for the frontend, along with Recharts for data visualization. It employs a responsive design to ensure usability across different devices and screen sizes.

Key features of the LiveStatusAPI application include:

1. **Real-Time Presence Tracking**: Users can see the current online status of other users, including their last seen time and device type.

2. **Engagement Analytics**: The app provides insights into user engagement metrics, such as average response times and engagement scores over time.

3. **Recent Activity Feed**: Users can view a log of recent status changes and activities performed by other users.

4. **User Management**: The application allows for filtering and searching users based on their presence status, making it easier to manage user interactions.

5. **Webhook Integration**: Users can register webhooks to receive real-time updates about user presence changes, enabling seamless integration with other systems.

6. **Customizable Dashboard**: The dashboard is organized into tabs, allowing users to switch between different views, such as overview, analytics, and reports.

7. **User-Friendly Interface**: The application features a clean and intuitive interface, with animated status indicators and responsive design elements.

Overall, the LiveStatusAPI application serves as a powerful tool for developers looking to implement presence-aware features in their applications, providing valuable insights into user behavior and engagement.

Live status api frontend

The Somnia Tipping dApp is a decentralized application designed for users to send and receive STT tokens on the Somnia Testnet. The app provides a user-friendly interface that allows users to connect their Ethereum wallets, view their transaction history, and manage their wallet information.

To use the app, users need to connect their Ethereum wallet, such as MetaMask. Once connected, they can navigate through various tabs, including a dashboard that displays their current balance, recent transactions, and a summary of their tipping activity. Users can also send tips to other wallet addresses by entering the recipient's address, the amount of STT tokens to send, and an optional message.

The app is built using modern web technologies, including TypeScript, React, and Next.js, along with the Ethers.js library for blockchain interactions. It utilizes Recharts for data visualization, allowing users to view their recent transaction activity in a graphical format. The user interface is styled with Tailwind CSS, providing a responsive and visually appealing design.

Key features of the Somnia Tipping dApp include:

1. Wallet Connection: Users can easily connect their Ethereum wallets to interact with the dApp.
2. Transaction History: Users can view their past transactions, including sent and received tips, with filtering options.
3. Send Tips: Users can send STT tokens to other addresses, with real-time gas fee estimation.
4. Dashboard Overview: A summary of the user's balance, net flow of tokens, and recent transactions is displayed on the dashboard.
5. Responsive Design: The app is designed to work seamlessly across different devices and screen sizes.
6. Theme Toggle: Users can switch between light and dark themes for a personalized experience.
7. Vanta Background: The app features a dynamic background animation that enhances the visual appeal.

Overall, the Somnia Tipping dApp provides a comprehensive platform for users to engage in tipping activities on the Somnia Testnet, making it easy to manage their tokens and track their transactions.

Somnia testnet dapp

This application is a multi-step form designed for registering new companies. It guides users through a structured process to collect essential information, including company details, address, contact information, and representative data.

To use the app, users navigate through various steps, each requiring specific information. The steps include entering company data (CNPJ, social reason, and trade name), address details (CEP, state, municipality, neighborhood, street, and number), contact information (email and municipal registration), and representative details (name, CPF, email, and phone number). The final step allows users to review all entered data before submission.

The app is built using TypeScript and React, leveraging components for user interface elements such as input fields, buttons, and cards. It utilizes state management to handle form data and navigation between steps. The CEP input component includes functionality to fetch address details from an external API based on the provided postal code, enhancing user experience by auto-filling address fields.

Key features of the app include:
- A multi-step form layout that organizes data entry into manageable sections.
- Real-time validation and formatting for CNPJ, CPF, and CEP inputs.
- Integration with an external API to retrieve address information based on the CEP.
- A review step that allows users to confirm their entries before final submission.
- Responsive design to ensure usability across different devices.

Overall, this application streamlines the process of company registration, making it user-friendly and efficient for both users and administrators.

Criar multisteps no formulario

This application is a web-based e-commerce platform designed for managing and selling a variety of products, including fashion and home decor items. It provides both a customer-facing storefront and an administrative backend for managing products, orders, and customer information.

Users can browse products by category, view product details, and add items to their shopping cart. The application supports features such as product previews, order summaries, and customer account management. Customers can also proceed to checkout, where they can enter their shipping information and complete their purchase.

The administrative interface allows store managers to manage products, view orders, and update order statuses. Admins can add new products, edit existing ones, and delete products as needed. The dashboard provides an overview of total orders, total products, and revenue generated.

To use the application, users can navigate through the categories or search for specific products. Admins can log in to access the management features. The application is built using Next.js, a React framework, and utilizes TypeScript for type safety. It employs Tailwind CSS for styling, providing a responsive and modern user interface.

Key features of the application include:
- Product browsing and searching capabilities.
- Detailed product pages with images, descriptions, and pricing.
- Shopping cart functionality with the ability to add, remove, and update product quantities.
- User authentication for customers and admins.
- Admin dashboard for managing products and orders.
- Order management with status updates and customer information.
- Responsive design for optimal viewing on various devices.

The application leverages various technologies, including:
- Next.js for server-side rendering and routing.
- TypeScript for type safety and improved developer experience.
- Tailwind CSS for utility-first styling.
- React for building user interfaces.
- A mock database for storing product and order information.

Overall, this application serves as a comprehensive solution for e-commerce needs, combining user-friendly features for customers with robust management tools for administrators.

Webstore design concept

The app is a comprehensive token analytics platform called Mintzilla, designed to provide real-time insights and trading information for tokens on the Solana blockchain. It allows users to track, analyze, and manage their token investments effectively. The app features a user-friendly interface with various functionalities, including smart alerts, advanced filtering, and sorting options.

To use the app, users can create an account and log in to access the dashboard, where they can view token cards displaying key metrics such as market cap, trading volume, and unique trader counts. Users can set alerts for specific tokens based on market cap thresholds, enabling them to receive notifications when significant changes occur. The app also supports a chat feature powered by an AI assistant, which can answer questions and provide insights about tokens.

The technologies involved in the app include React for the frontend, TypeScript for type safety, and various libraries such as Radix UI for components, Dexie for local database management, and Socket.IO for real-time data updates. The app also utilizes Tailwind CSS for styling and responsive design.

Key features of Mintzilla include:
- Real-time token tracking and analytics
- Smart alerts for price changes and market cap thresholds
- Advanced filtering and sorting options for token data
- A chat interface with an AI assistant for user inquiries
- A favorites system to manage preferred tokens
- A responsive design that works well on both desktop and mobile devices
- Integration with social media for sharing insights and updates

Overall, Mintzilla aims to empower users with the tools and information needed to make informed trading decisions in the dynamic cryptocurrency market.

Pump.Investments

The app is a web-based platform called NASAPGLOBAL, designed to provide users with a range of services including GSM repair, software solutions, and crypto trading. It features a user-friendly interface that allows users to register, access services, and share information easily.

To use the app, users can navigate through various sections such as the home page, services, and contact information. They can register for an account through a modal that collects essential information like name, country, phone number, and preferred language. The app also includes a share link modal that generates a unique link for users to share the platform with others via social media or email.

The app is built using modern web technologies, including React for the front-end, TypeScript for type safety, and CSS for styling. It utilizes components for modular design, such as cards for displaying services and features, modals for user interactions, and animations for enhanced user experience.

Key features of the app include:
- A registration modal for new users to sign up.
- A hero modal that provides introductory information about the services offered.
- A share link modal that allows users to generate and share a unique link to the platform.
- Animated text and typing effects to enhance visual engagement.
- An admin dashboard for managing user registrations, including approval and rejection functionalities.
- Responsive design that adapts to different screen sizes, ensuring accessibility on various devices.

Overall, NASAPGLOBAL aims to streamline the process of accessing GSM repair services, software solutions, and crypto trading, while providing a seamless user experience through its interactive and visually appealing interface.

The app is a comprehensive event management and networking platform designed to facilitate interactions among attendees, exhibitors, and organizers during events. It provides features for user registration, session management, exhibitor information, and networking opportunities, all aimed at enhancing the event experience.

Users can sign up as attendees, exhibitors, speakers, or organizers, each with tailored functionalities. Attendees can browse sessions, register for events, and connect with other participants. Exhibitors can manage their booths, track leads, and showcase their products. Organizers have access to tools for managing event logistics and analytics.

To use the app, users can navigate through various sections, including a dashboard that displays personalized information based on their role. The app also includes a QR code feature for quick check-ins and networking, a venue map for navigation, and a notification system to keep users informed about important updates.

The app is built using modern web technologies, including TypeScript, React, and Next.js for the frontend, and Supabase for backend services such as authentication, database management, and real-time functionalities. Key features include:

1. User Authentication: Secure sign-up and login processes with role-based access.
2. Event Management: Create, manage, and view events and sessions.
3. Exhibitor Management: Tools for exhibitors to manage their booths and products.
4. Networking: Features to connect attendees and facilitate communication.
5. Notifications: Real-time updates and alerts for users.
6. QR Code Generation: For easy check-in and networking.
7. Venue Map: Interactive maps to help users navigate the event space.

Overall, the app aims to streamline the event experience, making it easier for users to engage, network, and access information relevant to their interests and roles.

Shift Event App

Matrix Text Animation

Matrix Text Animation

Tabs animations with smooth transition

Animated tabs switcher

The app is a comprehensive web platform designed to assist B2B technology companies in enhancing their sales processes through AI-driven strategies and execution. It offers a range of services, including AI sales execution, sales performance consulting, and sales training, all aimed at helping businesses optimize their sales efforts and achieve measurable results.

Users can navigate the app to explore various sections, including detailed descriptions of services, client testimonials, case studies, and insights into industry trends. The app features a visually appealing layout with a responsive design, ensuring a seamless experience across devices.

Key features of the app include:

1. **Service Offerings**: Detailed information about AI sales execution, sales performance consulting, and sales training, including the benefits and methodologies used.

2. **Client Testimonials**: Real-world success stories from clients who have benefited from the services, showcasing the impact of the solutions provided.

3. **Case Studies**: In-depth analyses of specific client engagements, highlighting challenges faced, solutions implemented, and results achieved.

4. **Insights and Resources**: Articles and reports on industry trends, best practices, and the future of B2B sales, providing valuable information for users.

5. **Interactive Elements**: Engaging visuals, animations, and a user-friendly interface that enhances the overall user experience.

6. **Contact and Consultation**: Easy access to contact forms for users to schedule consultations or inquire about services, facilitating direct communication with the consulting team.

The app is built using modern web technologies, including React for the frontend, Next.js for server-side rendering, and Tailwind CSS for styling. It leverages various libraries such as Framer Motion for animations and Lucide React for icons, ensuring a dynamic and visually appealing user interface.

Overall, the app serves as a powerful tool for B2B tech companies looking to leverage AI in their sales processes, providing them with the resources, strategies, and support needed to succeed in a competitive market.

Streamline Landing Page

The app is called BibleVerseBook, designed to provide users with a daily Bible verse presented in seven different translations. It aims to enhance users' spiritual engagement by offering a simple and intuitive interface for exploring scripture.

To use the app, users can navigate through the verses using "Previous" and "Next" buttons to cycle through the available verses. Each verse is displayed with its reference and multiple translations, allowing users to compare different interpretations. Users can also share the current verse via a built-in sharing feature, which utilizes the Web Share API for easy sharing on social media or copying to the clipboard. The app also includes a button to return to the verse of the day, which is determined based on the current date.

The app is built using TypeScript and React, leveraging Next.js for server-side rendering and routing. It employs Tailwind CSS for styling, ensuring a responsive and modern design. The app's structure is modular, with components for different sections such as the hero section, features, testimonials, pricing, contact information, and a footer.

Key features of the app include:
- Daily verse display with multiple translations.
- Intuitive navigation for browsing verses.
- Sharing functionality for easy dissemination of verses.
- Responsive design that adapts to various screen sizes.
- Modular component structure for maintainability and scalability.

Overall, BibleVerseBook serves as a user-friendly platform for daily spiritual reflection, making scripture accessible and shareable.

Site web en français

The Chess Clock app is designed to provide a digital timer for chess games, allowing players to manage their time effectively during matches. The app features two main clock interfaces for each player, where users can start, pause, and switch between players' timers. The default settings include a 3-minute timer for one player and a 5-minute timer for the other, but these can be customized through the settings interface.

To use the app, players simply click on their respective clock to start the timer. Clicking on an active clock switches the timer to the other player, while clicking on a non-active clock starts the game. Players can reset the game at any time, which will restore the timers to their initial values. The app also includes a settings menu where users can adjust the initial time, add or remove players, and select player colors.

The app is built using TypeScript and React, leveraging hooks for state management and side effects. It utilizes the Lucide React library for icons and Tailwind CSS for styling, ensuring a responsive and visually appealing interface. Key features include real-time countdowns for each player's timer, customizable settings for game duration and player colors, and a user-friendly interface that allows for easy interaction.

Overall, the Chess Clock app serves as a practical tool for chess enthusiasts, providing a straightforward way to keep track of time during games while offering customization options to enhance the user experience.

This application is a terminal emulator designed to provide a user-friendly interface for executing commands and managing files, inspired by modern terminal experiences. It allows users to input commands, view outputs, and navigate through a file system, all within a visually appealing environment.

To use the app, users can type commands into the command input field, which supports command history navigation and basic autocomplete functionality. The terminal displays the results of executed commands, including success, error, and warning statuses. Users can also access a file browser to navigate through their project files and folders, toggle between different views, and customize the terminal's theme.

The app is built using TypeScript and React, leveraging various libraries for UI components and icons, such as Lucide for icons and Tailwind CSS for styling. The application structure includes components for the terminal interface, command input, command history display, file browsing, and theme selection.

Key features of the app include:
- Command input with history navigation and autocomplete suggestions.
- Display of command outputs with status indicators (success, error, warning).
- A file browser for easy navigation of project files and folders.
- The ability to toggle between split view and single view for command output.
- A theme selector to customize the terminal's appearance with multiple themes.
- Keyboard shortcuts for quick access to various functionalities, such as toggling the file browser and changing themes.
- Command suggestions to assist users in executing common commands.

Overall, this terminal emulator aims to enhance productivity by providing a streamlined interface for command execution and file management, making it suitable for developers and users who frequently interact with command-line tools.

Terminal Interface

Neal Fun

This app is designed to provide users with a visually engaging experience when they encounter unauthorized or forbidden access to certain resources. It features animated alerts that inform users of their access status, enhancing user interaction through dynamic visual feedback.

The app utilizes React and TypeScript for its development, leveraging the Framer Motion library to create smooth animations. The core component, AnimatedAlertCircle, is an SVG-based animation that visually represents alerts with customizable properties such as size, stroke width, icon color, and circle color. This component is used in both the Unauthorized and Forbidden pages to indicate access issues.

To use the app, users simply navigate to restricted areas, where they will be presented with either an "Unauthorized Access" or "Access Forbidden" message, accompanied by an animated alert icon. Each page features a prominent title and a subtitle explaining the access issue, along with a button that allows users to return to the home page.

Key features of the app include:
- Animated alert icons that provide visual cues for access issues.
- Customizable alert properties to fit different design requirements.
- Smooth animations for text and buttons, enhancing the overall user experience.
- Responsive design that ensures accessibility across various devices.

Overall, this app combines user-friendly design with effective communication of access restrictions, making it a valuable tool for managing user permissions in web applications.

Animated unauthorized page

FinPro + LinkPro apps

This application is a web-based platform designed for the recruitment of security guards at Vishal Mega Mart. It provides a comprehensive and interactive experience for candidates, allowing them to register, take an entrance exam, and receive evaluations based on their responses. The app is built using modern web technologies, including React, Next.js, and Tailwind CSS, ensuring a responsive and visually appealing user interface.

To use the app, candidates can navigate to the homepage where they can start the registration process by entering their name. Once registered, they can take the entrance exam, which consists of a series of humorous and challenging questions. The app evaluates their answers using an AI examiner named Luna, who provides feedback and scores based on the creativity and humor of the responses. Candidates can also submit feedback and suggestions for future questions.

Key features of the app include:
- User registration and authentication to track candidates' progress.
- An interactive exam interface that allows candidates to answer questions and receive immediate feedback.
- A unique evaluation system that uses AI to assess answers based on humor and creativity.
- A dashboard for administrators to monitor page views, unique visitors, test results, and user feedback.
- A responsive design that adapts to various screen sizes, ensuring usability on both desktop and mobile devices.
- Integration with Firebase for data storage and analytics, allowing for real-time tracking of user interactions and exam results.

The application also includes various UI components such as cards, buttons, modals, and forms, all styled with Tailwind CSS for a consistent look and feel. The use of animations and transitions enhances the user experience, making the app engaging and dynamic. Overall, this platform aims to streamline the recruitment process while providing a fun and interactive experience for candidates.

This application is a visualization tool that dynamically generates graphical representations based on real-time sensor data. It utilizes Web Serial API to connect to a serial device, allowing users to visualize data from up to eight sensors. The app features two primary visualizations: a Psychedelic Shape and a Kaleidoscope, each of which responds to the sensor data in unique ways.

To use the app, users must connect a compatible serial device. Upon launching, the app attempts to establish a connection to the device. If successful, it retrieves sensor data and updates the visualizations accordingly. Users can switch between the two visualizations using an interface that allows for easy selection. The app also includes a debug mode for monitoring connection status, raw data, and visualization parameters.

The application is built using React and leverages the Three.js library for rendering 3D graphics. It employs React Three Fiber to integrate Three.js with React, enabling a declarative approach to building 3D scenes. The visualizations are created using custom shader materials, which are defined in GLSL (OpenGL Shading Language) for both vertex and fragment shaders. The shaders manipulate the geometry and colors based on the incoming sensor data, creating dynamic and visually engaging effects.

Key features of the app include:
- Real-time visualization of sensor data through interactive 3D graphics.
- Two distinct visualization modes: Psychedelic Shape and Kaleidoscope, each with customizable parameters.
- A robust connection management system that handles serial port connections, including retries and error handling.
- A debug panel that provides insights into connection status, raw data, and the mapping of sensor values to visualization parameters.
- Responsive design that adapts to window resizing, ensuring a consistent user experience across devices.

Overall, this application serves as a powerful tool for visualizing sensor data in an engaging and interactive manner, making it suitable for developers and users interested in data visualization and real-time graphics.

GLSL sensor visualization

This application is a Graph Data Explorer designed to visualize and interact with graph data structures. It allows users to create nodes and links, find paths between nodes, and visualize the graph dynamically.

To use the app, users can add new nodes and connections through a user-friendly interface. The left sidebar contains controls for pathfinding and manual input. Users can select a start and end node to find the shortest path between them, which is then animated on the graph display. Additionally, users can manually input new nodes and links, specifying attributes such as node name, group, and value.

The app is built using React and TypeScript, leveraging the Next.js framework for server-side rendering and dynamic imports. The graph visualization is powered by the react-force-graph-2d library, which provides a responsive and interactive graph display. The user interface components are styled using a custom design system, ensuring a consistent look and feel.

Key features of the app include:
- Dynamic graph visualization with zoom and pan capabilities.
- Pathfinding functionality that animates the shortest path between selected nodes.
- Manual input controls for adding nodes and links, with validation to ensure data integrity.
- Real-time updates to the graph as nodes and links are added or modified.
- A responsive layout that adapts to different screen sizes.

Overall, the Graph Data Explorer provides a comprehensive tool for visualizing and manipulating graph data, making it suitable for educational purposes, data analysis, and software development.

Neo4j database site

Wizard form with persistence and optional steps. Next Js and Shadcn UI

Carousel Components

Animated Carousel

The app is an interactive technical documentation platform designed for the aviation industry, specifically for the GaiaAir aircraft systems. It provides comprehensive access to various technical documents, maintenance procedures, and system information organized by ATA chapters and aircraft zones.

Users can navigate through the app to explore detailed information about different aircraft systems, including air conditioning, landing gear, electrical power, and more. The app features a user-friendly interface with a search function, allowing users to quickly find specific documents or topics.

Key technologies used in the app include TypeScript and React for building the user interface, along with Next.js for server-side rendering and routing. The app also utilizes a modular design, allowing for easy updates and maintenance of the documentation.

Key features of the app include:
- A structured layout that organizes information by ATA chapters and aircraft zones.
- Interactive elements such as tabs for easy navigation between different sections, including maintenance procedures, safety precautions, and technical publications.
- A mind map visualization that provides a holistic view of the aircraft's systems and their interrelationships.
- A component distribution matrix that shows how various components are distributed across different aircraft zones.
- S1000D-compliant documentation for the Aerospace Modular Programming Ethical Language (AMPEL) system, integrated with GaiaAir.
- Quick links to related resources and documentation, enhancing user experience and accessibility.

Overall, the app serves as a comprehensive resource for aviation professionals, providing essential information for aircraft maintenance, operations, and compliance with industry standards.

GaiaAir schema format

The app is a comprehensive onboarding tool designed for new clients of Boome Performance Digital, specifically focusing on paid traffic management. It guides users through a structured process that includes obtaining access to necessary accounts, configuring analytics tools, auditing tags, and optimizing user experience and conversion rates.

To use the app, users can navigate through a sidebar that lists various steps and sub-steps of the onboarding process. Each step contains detailed instructions, tips, and resources to help users complete their onboarding efficiently. Users can click on each step to expand it and view sub-steps, which provide more granular guidance.

The app is built using modern web technologies, including TypeScript and React, with a focus on user experience through animations and interactive elements. It utilizes libraries such as Framer Motion for animations and Lucide React for icons, enhancing the visual appeal and interactivity of the interface.

Key features of the app include:
- A structured onboarding process with clear steps and sub-steps.
- Interactive sidebar navigation for easy access to different sections.
- Animated elements that enhance user engagement, such as glowing buttons and ripple effects on clicks.
- Detailed content for each step, including text, lists, and icons to aid understanding.
- Responsive design that adapts to different screen sizes, ensuring usability on both desktop and mobile devices.

Overall, the app serves as a valuable resource for clients to ensure a smooth and effective onboarding experience, setting the stage for successful digital marketing campaigns.

Background Paths

Card Hover Effect Demo

Card Hover Effect Demo

The Edu-Build Institute Distance Learning Portal Support Hub is a comprehensive web application designed to assist students enrolled in distance learning programs. The app provides a centralized platform for troubleshooting access issues, managing payment inquiries, and facilitating onboarding procedures.

Users can navigate through various sections, including a troubleshooting guide that helps identify common issues related to login credentials and account access. The guide is interactive, allowing users to answer questions and receive tailored solutions based on their responses. Additionally, the app features a Payment FAQ section that addresses common queries regarding payment references, processes, and troubleshooting steps.

The onboarding procedure is clearly outlined, providing new students with step-by-step instructions on how to successfully register and access the distance learning platform. This includes information on submitting applications, payment processes, and important reminders about orientation sessions.

The application is built using modern web technologies, including TypeScript and React, with a focus on responsive design to ensure usability across devices. It utilizes Tailwind CSS for styling, providing a clean and user-friendly interface. The app also incorporates analytics tracking to monitor user interactions and improve the overall experience.

Key features of the app include:
- An interactive troubleshooting guide that adapts to user responses.
- A comprehensive Payment FAQ section addressing common payment-related questions.
- A detailed onboarding procedure for new students.
- Responsive design for optimal viewing on both desktop and mobile devices.
- Analytics tracking to monitor user engagement and improve support services.

To use the app, students can simply visit the portal, select the relevant section based on their needs, and follow the guided prompts to resolve their issues or find the information they require. The app also provides contact information for technical support and payment inquiries, ensuring that students have access to assistance when needed.

React UI/UX improvements