126 Repositories
JavaScript chakra-ui-animations Libraries
Some ideas for grid to slideshow switch animations using GSAP's Flip plugin.
Grid to Slideshow Switch Animations Some ideas for grid to slideshow switch animations using GSAP's Flip plugin. Article on Codrops Demo Installation
This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X and O on a 3x3 grid.
Tic Tac Toe Game This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X a
Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components.
Chakra UI Animations Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components. Installation yarn add @
Second Prize Winner of Crypto.com Hackathon 2022. An NFT Ticketing Platform built with Next.js and Ethereum.
Second Prize Winner of Crypto.com The Next Gen Hackathon 2022! How to run this project locally clone the repo and run yarn install in the root directo
🐦 A simple and minimal dashboard for your homelab made with Chakra UI and NextJS!
Dashbird (WIP) 🐦 A simple and minimal dashboard for your homelab made with Chakra UI and NextJS! Features 💻 Simple configuration 🚀 Easily selfhosta
A tool to unpack, repack, edit and play 2d animations from Supercell games
SC Tools This module is intended to unpack, edit and repack .sc files from Supercell games. SC files are unpacked to disk as projects. Projects contai
The Awesome estate web application displays a list of apartments that were provided by local data. The users can check out the featured and recent apartments. Also, the user can click the house to get the details of the selected house.
Awesome Estate The Awesome estate web application displays a list of apartments that were provided by local data. The users can check out the featured
Unlock your inner chef - Submission for Hackthenorth 2022
MyRecipePal Table of Contents 📝 About 🛠️ Built With ⚙️ Usage ⛰️ Challenges 🛣️ Roadmap 📝 About As university students, we all understand that one o
An Admin Panel developed for simplifying the process of CRUD operations in the database.
Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np
Small example showing how you can make game sprite animations using CSS with Javascript movement.
Hi there, I'm Björn Hjorth 👋 I like combining the web and game development, if you like what you see please do not be a stranger and say "Hi" on Twit
Vaultacks lets users store files off-chain on Gaia. Files are encrypted by default but also can be made public and shared
Vaultacks Vaultacks is built on the Stacks Chain. It lets users upload files to Gaia, a off-chain data storage system. Vaultacks currently uses the de
A Versatile, Extensible Dapp Boilerplate built with Rainbowkit, Next.js, and Chakra-ui.
rainplate • A Versatile, Extensible Dapp Boilerplate built with Rainbowkit, Next.js, and Chakra-ui. Getting Started Click use this template to create
A fullstack next.js template with all the fun stuff like next auth, mongodb, prisma, chakra ui
Welcome to FullStack Next.js template 👋 A fullstack next.js template with all the fun stuff like next auth, mongodb, prisma, chakra ui ✨ Demo Tech Ne
Source code my personal website is written using Next.js, Tailwind CSS and Chakra UI
Homepage Overview. / Home page. pages/blog/[slug] - Static pages/social - Social page. pages/photos - Photos page. pages/activites - Activites page Di
An opinionated Next.js + Chakra + TypeScript starter
Nextjs + Chakra + Typescript Starter ✨ An opinionated Next.js + Chakra + TypeScript starter packed with: ⚡️ Next.js 12 ⚛️ React 18 ✨ TypeScript 🧘 Cha
A small library for creating typing animations.
A small library for creating typing animations. View a short video demonstration here. Installation npm i tiper-js Usage Initialization is really simp
Lightweight JavaScript library that allows you add motion blur to your CSS animations
MotionBlurJS For more information and examples please visit: https://www.motionblurjs.com What is MotionBlurJS MotionBlurJS is a lightweight JavaScrip
Customisable javascript skeleton loader.
JS Skeleton loader Simple but very powerful loader package built with full javascript. Installation To install this package, include index.js file int
A simple editor allows you to easily add and customize all the sections you need for your profile's readme.
Create your Profile README using the best Templates tomper-readmify.herokuapp.com This is the frontend + backend of TomperReadmify build with MERN sta
👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.
Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro
Lightweight and easy to use vanilla js library to add css animations to elements on scroll.
Scrollrisen Trigger css animations on scroll as elements enter the viewport. Zero dependencies, lightweight and easy to use and customize Installation
Efeito de ripples baseado no Material Design.
Efeito de ripples baseado no Material Design feito com CSS, JavaScript e jQuery Esse efeito utiliza seletores do jQuery e manipulação do DOM para obte
Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.
Wave.js Audio visualizer library for javascript. Installation Install With CDN script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.
Full featured JavaScript image & video gallery. No dependencies
lightgallery.js Full featured JavaScript lightbox gallery. No dependencies. Important notice lightgallery.js has been merged with lightGallery. That m
🌈 CLI tool to scaffold chakra ui projects, without wasting time.
Create Chakra Project (create-chakra) ⚒ Tool to scaffold chakra apps, without wasting time. It uses existing tools like create-next-app and create-vit
Um jogo da memória tematizado com One Piece.
Getting Started - Jogo da Memória Eis um joguinho da memória . Também foi o primeiro projeto meio complicadinho que consegui resolver por conta própri
A tiny JavaScript library to enable CSS animations when user scrolls.
A tiny JavaScript library to enable CSS animations when user scrolls. This library allows you to toggle one or more classes on an element when it appe
A small jQuery plugin for rendering scroll-based HTML animations
Storyline Build beautiful landing pages that change as the user scrolls up or down. Project created in 2013 and ported to GitHub in 2021. Demo Just vi
A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.
jQuery AniView A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4
CSS-based animations triggered by JS, defined in your stylesheet
Anim-x CSS-based animations triggered by JS, defined in your stylesheet. $ npm i https://github.com/LTBL-Studio/anim-x.git Quick start An animation is
A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.
Lava-Lamp Description: A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic anima
A timed continuous carousel that uses vanilla JavaScript & CSS animations.
Continuous Carousel ∞ Timed continuous carousel that uses vanilla JavaScript & CSS animations. It supports both horizontal and vertical scrolling. Mar
Simple scroll based text reveal animation library.
Simple scroll based text reveal animation library. ⛰️ DEMO Getting Started Using packge manager NPM Install textify using npm: npm install textify.js
write the (w)right way!
Wrighter - A Powerful Markdown Blogger & A Writing Companion ⚡ Wrighter is originally made for the hashnode x PlanetScale hackathon It has a powerful
Share all your links with just one link 3
Sharing links was never this easy and beautiful Share all your profile links in just one link See the LIVE DEMO DEMO: Completely responsive and beauti
The Remix Stack with Clerk authentication, Supabase database, Chakra UI, testing, linting, and more.
Remix Bossa Nova Stack Learn more about Remix Stacks. What's in the stack User management with Clerk Database with Supabase Styling with Chakra UI Dep
:loop: Create loopy loading animations
Sonic.js See some examples! Create your own with Sonic Creator! Sonic is a tool that you can use to create spinny-loady-thingies on the fly. It's best
Delightful, performance-focused pure css loading animations.
Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti
CSS classes to move your DOM!
CSShake Some CSS classes to move your DOM! Live Demo Download Center You could download the complete csshake.css file or separated files for each shak
CSS3 Animations with special effects
🎩 magic CSS3 Animations with special effects. (→ 3.1 kB gzip) Demo Checkout the demo for the animations here Table of Contents Installation Getting S
Transform your icons with trendy animations.
iconate.js A call to transform your existing icons in a cool trendy way iconate.js is a tiny performant library for cross-browser icon transformation
Custom navigations for Solid written in Typescript. Implement custom page transition logic and ✨ animations ✨
solid-custom-navigation Get, Set, Go! Custom navigations for Solid, written in Typescript. Implement custom page transition logic and ✨ animations ✨ .
Markdown note maker (with Git sync) using Tauri.
Mediocre Markdown note maker (with Git sync) using Tauri. Screens Tech Stack Frontend Monaco Editor for the editor interface Chakra UI library Redux T
📒 midubot docs - Discord bot for midudev.
📒 midubot docs - Discord bot for midudev 📦 Packages: ⚡️ Nextjs - The React Framework for Production. 💅 Chakra UI - Create accessible React apps wit
Custom alert box using javaScript and css. This plugin will provide the functionality to customize the default JavaScript alert box.
customAlertBoxPlugin Custom Alert Box Plugin Using JavaScript and CSS Author: Suraj Aswal Must Include CSS Code/Default Custom Alert Box Class: /* mus
📜 A CV Generator.
CV Generator Adjustments and improvements The project is still in development and the next updates will focus on the following tasks: Generate resumes
Reddit is a website where a community of registered users ( redditors) submits content. Its format resembles a traditional bulletin board system, allowing users to post messages and links to other websites and comment on each other's posts. Entries are ranked by a voting system; other users can vote comments and posts either up ( upvoted) or down.
Setup First, run the development server: npm run dev Open http://localhost:3000 with your browser to see the result. You can start editing the page by
chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications
chakra-radix-colors chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications. About C
Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript. Internationalization, SEO, Components, Theme (dark/light) and more...
Typescript Next.js Chakra-UI Framer-Motion Starter Kit Start with a powerful template ⚡️ Table of contents Getting started Paths & Files Useful depend
This project is about building a web application to show a weather forecast using weather API.
Weather App Web application to show the current and upcoming week weather forecast. Want to see live preview » ✧ View Demo ✧ Report Bug ✧ Getting Star
A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders!
Sliderland A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders! Credits The recording feature uses ffmpeg.wasm
Nebula is a lightweight (1kb compressed) JavaScript library that creates beautiful universe animations.
Nebula is a lightweight JavaScript library for creating beautiful universe animations. Including configurable Stars, Nebulas, Comets, Planets and Suns. Compatible with SSR
Taskem is a task manager that help you stay organized while boosting your creativity at the same time.
Taskem Introduction Taskem is a task manager that helps you stay organized while boosting your creativity at the same time. Our main goal is to help e
An unofficial(yet) implementation of Chakra Ui for SvelteJS
Welcome to chakra-ui-svelte 👋 An implementation of Chakra Ui in Svelte Homepage Demo Install pnpm install chakra-ui-svelte import { Box } from "chakr
Danger is near (play to earn game, gamefi on near chain testnet) - user play as a fireknight in a PIXELVERSE world who go to forest and kill monster.
Danger is near (play to earn game, gamefi on near chain testnet) - user play as a fireknight in a PIXELVERSE world who go to forest and kill monster. User can earn $DANGER token and score to compete with others user.
🎬 super easy recording for p5.js animations
About • Why p5.capture? • Getting started • API Options • Browser compatibility • Limitations About Assuming you would like to record p5.js animations
The open-source design system of Tree.ly
🌳 Boemly Boemly is the open source component library maintained by Tree.ly based on ChakraUI. 🏃♀️ Getting started Install Boemly: npm i boemly --sa
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).
spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo
🦸♀️ A super template for Next.js with a pack of incredible tools
Next-Plate 🦸♀️ A super template for Next.js with a pack of incredible tools 🌎 Translations 🚀 Demo → Deploy your own copy of this template in just
Next.js and Apollo-Client web application, designed for learning and real-world applicability.
NextJs Apollo Boilerplate Boilerplate for building applications using Next.js and Apollo This boilerplate is made for those who want to start a new pr
🎵 simple and RESTful API for getting lyrics of any song made using Next.js and ChakraUI.
playground . guide . discord Overview Lyrist is a simple yet powerful RESTful API for getting lyrics of any song using song name and it's artist name.
🛰 Shared component across routes with animations
Shared Vue component across routes with animations Live Demo Why? It's quite common you might have a same component used in different routes (pages) w
Animation Academy teaches you CSS animations using the transition and animation properties.
Animation Academy Open Animation Academy Contents Background Built With Functionality Feature Highlights Wireframes Features In Development Backgrou
Animated FlatList component that supports entering, exiting and reordering animations.
react-native-flatlist-animated Animated FlatList component that supports entering, exiting and reordering animations. Installation npm i react-native-
Upgraded purity dashboard template.
Upgraded Purity UI Dashboard Check all components here. Documentation built by Developers Each element is well presented in a very complex documentati
🌈 what's your GitHub profile color?
🌈 OctoColor 🤔 Wanna know what's your GitHub Profile Color? 🐱 Head over to https://octocolor.vercel.app 🐱💻 How does GitColor work? The idea is si
A custom Chakra UI component that adds ready-made styles for rendering remote HTML content.
Chakra UI Prose Prose is a Chakra UI component that adds a ready-made typography styles when rendering remote HTML. Installation yarn add @nikolovlaza
👜 Next-gen e-commerce built using Remix, Chakra UI, GraphQL and web3
👜 Future Store About Here at New Store, we have the best in women's, men's, bags, shoes, accessories and more. Unmissable discounts and installments.
Super Cat Meow Squad! 🐱
This page dynamically displays the 6 members of the SCMS and contains some interactions with other users interested in them, like commenting on them or a like counter for each kitten.
An animation library, built on the Web Animations API for the smallest filesize and the fastest performance
motion-signals A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
A React-Fullstack platform helps to track & compare your Incomes & Expenses transactions in one place via detailed Graphical information to manage your Budget.
Budget Master Track your income and expenses in one place via detailed graphical information to manage your budget. Manage your budget and transaction
Lightweight Loading Animation
◼️ Features: 🛠 Easy to Use 🌠 Fast & Lightweight (0.5Kb) 💪 No dependencies, built with VanillaJS 🌎 Tested in all modern browsers ◼️ Demo: https://b
Veroo is a cappuccino delivery app. This application is for the purpose of studying modern interface and animations.
Veroo Veroo is a cappuccino delivery app. This application is for the purpose of studying modern interface and animations. Pleasant, fluid and lively
🟩 in case you want to cheat on your wordle games
Wordle Solver How to use Enter each right guess in the first grid Enter all letters that you know aren't in a certain position in the second grid For
🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar
![🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar](https://raw.githubusercontent.com/BraianVaylet/buildspace-epic-nfts-ui/main/public/dragon2.png)
🐲 Epic NFTs [UI] El proyecto se encuentra deployado en Vercel para que puedan verlo e interactuar con él, toda crítica o comentario se agradece, pued
An application to capture the 10 most watched movies/series on netflix.
Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np
Verbosely Documented, Minimal Starknet Contract Examples.
cairo-by-example • Verbosely Documented, Minimal Starknet Contract Examples. Cairo By Example deployed to https://cairo-by-example.xyz Developing Clon
Modern, Flexible Starknet Dapp Template
cairopal • Modern, Flexible Starknet Dapp Template. Developing Clone the repository git clone [email protected]:a5f9t4/cairopal.git cd cairopal Install D
Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers
PersonalBlog This project was generated with Angular CLI version 13.0.1. Front-end Interface Development server Run ng serve or ng serve --configurati
A powerful little tool for managing CSS animations
NO LONGER BEING SUPPORTED Please consider https://github.com/ThrivingKings/animo instead animo.js A powerful little tool for managing CSS animations.
CSS animations engine
Animatic With Animatic it's easy to animate over a hundred objects at a time. Each item can have it's mass and viscosity to emulate realistic objects!
Making Animation Simple
Just Animate 2 Making Animation Simple Main Features Animate a group of things as easily as a single thing Staggering and delays Chainable sequencing
Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
lax.js Simple & lightweight (4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. DEMO What's new w
React.js todo app with authorization, Testing: Cypress(e2e), UI (Chakra UI), Eslint, prettier, git hooks
React TypeScript template with Vite This is a React + TypeScript boilerplate built with Vite. What's inside? ReactJS Vite TypeScript Jest Testing Libr
Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().
slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti
My-portfolio - 🪶 My portfolio built with Remix, ChakraUI...
Welcome to Remix! Remix Docs Deployment After having run the create-remix command and selected "Vercel" as a deployment target, you only need to impor
Json2video-nodejs-sdk - Create videos programmatically in the cloud from NodeJS: add watermarks, resize videos, create slideshows, add soundtrack, voice-over with text-to-speech (TTS), text animations.
Create videos programmatically in Node JS Create and edit videos: add watermarks, resize videos, create slideshows, add soundtrack, automate the creat
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
Gatsby Starter Portfolio: Cara Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Using the Gatsby Theme @lekoarts/gat
Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máximo de criatividade possível😜
Steck Cars Demonstração : Sobre Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máxi
Real state property listing app using next.js , chakra.ui, SCSS
This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://
Vite template with TypeScript, Chakra UI, Eslint Airbnb, Prettier
Vite + Typescript + ChakraUI = ❤️ This is a vite template that combines several technologies: Vite React TypeScript ChakraUI Eslint with eslint-config
classify store using react js✔
Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np
A Portfolio with Animations in JavaScript
A Portfolio with Animations in JavaScript In this video I show you how to build a Portfolio with Animations and deploy it! To get 10% off on Hostinger
Website yang memberikan informasi terkait ketersediaan rumah sakit dan tempat tidur rumah sakit untuk pasien covid-19 ataupun non-covid di Indonesia.
Bed Covid RS Indonesia Website yang memberikan informasi terkait ketersediaan rumah sakit dan tempat tidur rumah sakit untuk pasien covid-19 ataupun n
My personal website.
Getting Started First, copy .env.example and paste as .env.local, fill all field: NEXT_PUBLIC_CONTENTFUL_SPACE_ID = '' NEXT_PUBLIC_CONTENTFUL_ACCESS_K
This project was bootstrapped with Chakra UI & Create React App
Getting Started with Create React App This project was bootstrapped with Chakra UI & Create React App. ScreenShots Available Scripts In the project di
Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.
Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp
Create cool animated SVG spinners, loaders and other looped animations in seconds
SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG
Lightweight, simple to use jQuery plugin to animate SVG paths
jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using
Pure css cross-browser loading animations.
[ArtWorx] xLoader Pure css cross-browser loading animations. xLoader is part of the ArtWorx collection. Most of the loaders made by community, You can