A head start on the good stuff.
Animated backgrounds, expressive type, and playful interactions. Find the detail that brings your idea to life.
Meet Migbits Small details. Big possibilities. Animated React components for
Animated React components for
websites people remember.
Expressive components and backgrounds for React.
Play with the details. Make something unmistakably yours.
import GradientWaves from './GradientWaves';
export default function Hero() {
return (
<GradientWaves
waveColor=
speed={}
amplitude={}
waveScale={}
/>
);
}
React · TypeScriptClick a value to tweak it
~/migbits main*
$ npm run dev
✓ Ready. Let's make something good.
➜ Local: http://localhost:3000/
Gradient Waves / Live preview
Not a video. Not a mockup. Just a little code.Try a preset. Click a value. See what happens. ↑
BUILT FOR YOUR NEXT IDEASmall components.
Small components.
Anything but ordinary.
Motion
0.4
Feeling
100
Your taste. Your rules.
Tweak the colors. Change the motion. Every detail is an invitation to experiment.
⚛TSCSSN
Fits right into your stack.
Made with React, TypeScript, and CSS. Built to feel at home in your next project.
THE PLAYGROUND CONTINUESA few bits.
A few bits.
Endless possibilities.
The best way to get it is to play with it.
Hover, click, and find your next starting point.
Gradient Waves
Elastic Text
Orbit
Magnetic Button
Infinite Stack
Dot Field
Six live experiments. One very curious you.
LESS BETWEEN YOU AND YOUR IDEAFind your bit.
Find your bit.
Make it yours.
Open a preview, explore the source, and start experimenting. Small, understandable pieces you can shape around your own project.
Explore the source$ git clone https://github.com/rakshithp1/migbits.git
$ cd migbits && npm ci
$ npm run dev
import { useState } from 'react'
export default function YourNextIdea() {
return (
<SomethingUnforgettable />
);
} All yours from here.
A LITTLE MORE CONTEXTQuestions,
Questions,
answered.
Migbits is a playground for expressive React UI. This landing page features six interactive previews to explore and remix.
Yes. Try the live hero controls, choose a preset, and open a component to copy its starter source. Colors, timing, and shapes are yours to change.
This site is built with Next.js, React, and TypeScript. The previews use browser APIs and CSS, so interactive components belong inside a client component.
The examples on this page use CSS and a small canvas renderer. No animation library is required to run them.
YOUR NEXT IDEA STARTS WITH A BITBuild something
Build something
people remember.
A little motion. A little personality. A lot of possibility.
Find your first bit