M
MicroKit
/
components
Files
Code
Info
Aurora Download Button
aurora-download-button
A layered blue download button with a luminous rim, directional shadow, and blended hover bloom.
Blur Glide Menu
blur-glide-menu
A nested menu whose steps blur before they glide aside, while the surface animates to the height of the step arriving.
Bounce Checkbox
bounce-checkbox
A checkbox whose fill springs out past the box with a little swell, draws its tick, then strikes the label through and dims it.
Circle Surface Button
circle-surface-button
A circular CTA whose dark surface expands into an orange fill.
Contact Details Reveal
contact-details-reveal
A compact white contact label that shifts upward to reveal muted contact details with an orange accent.
Contact Reveal Button
contact-reveal-button
A circular arrow and label that resolve into a polished contact pill on hover.
Contact Underline Button
contact-underline-button
A compact contact action whose icon turns orange while an underline draws beneath the label.
Cursor Edge Glow Button
cursor-edge-glow-button
A spring-tracked pill light with mirrored edge glows that crossfade as the pointer changes sides.
Cursor Follow Share Button
cursor-follow-share-button
A dark share pill with a glowing send orb that tracks the pointer and a looping upward text swap.
Expanding Contact Button
expanding-contact-button
A pill-shaped call-to-action with an expanding background and arrow icon, adapted from the supplied Webflow export.
Expanding Icon Tabs
expanding-icon-tabs
An icon bar where the chosen tab widens to reveal its label and the rest of the row slides over to make room.
Expanding Newsletter Button
expanding-newsletter-button
An orange newsletter pill with a growing dark circle and an arrow that slides in from the left.
Floating Newsletter Button
floating-newsletter-button
A compact newsletter button that scales and lifts into a soft white glow on hover.
Focus Field
focus-input
An input with a clean animated focus treatment.
Fuse Undo Button
fuse-undo-button
An archive button that turns into Undo and lights an orange fuse around its outline; the fuse holds still while you hover it, so the chance to undo only runs out once you look away.
Get Started Circle Swap
get-started-circle-swap
A bordered CTA whose orange circle exits right as a directional arrow slides into place.
Glow Arrow Button
glow-arrow-button
A bright CTA with a soft glow and a moving arrow on hover.
Gradient Underline Button
gradient-underline-button
A label that scales up as a warm gradient underline grows across it.
Hold to Delete Button
hold-to-delete-button
A delete button that only fires when held: an orange bar fills linearly from left to right as a matching glow builds behind it, snapping back if you let go early and landing on a check with a pulse once it completes.
Hover Glide Cards
hover-glide-cards
One highlight glides from card to card under the pointer, seen only through the cards themselves, so it drains out of one and fills the next.
Icon Swap Button
icon-swap-button
A leading icon slides out as an arrow opens in to take its place, trading without changing the button's width.
Inset Circle Button
inset-circle-button
A circular project CTA that reveals its dark base as the inset surface collapses.
Layered Gradient Button
layered-gradient-button
A dimensional pill with gradient text and subtly shifting layered surfaces.
Magnetic Fill Button
magnetic-fill-button
A magnetic pill button with a bottom-to-top background fill.
Neon Invert Button
neon-invert-button
A bold orange CTA that inverts into a dark, softly glowing surface on hover.
Next Dot Fill Button
next-dot-fill-button
A bordered pill whose leading dot expands into a solid fill while the label swaps for an arrow cue.
Next Reveal Button
next-reveal-button
An outlined arrow control that expands into a bright Next button on hover.
Orange Circle Fill Button
orange-circle-fill-button
An orange outlined pill that fills from a growing circle.
Outline Wipe Button
outline-wipe-button
Hollow stroked lettering that fills with orange behind a rounded bar sweeping left to right.
Preview in Browser Button
preview-browser-button
An outlined pill button with a diagonal arrow that slides through on hover.
Preview Hover Toolbar
preview-hover-toolbar
A thin empty pill that grows wider and taller off its fixed bottom edge when the surrounding preview is hovered, scaling its actions in one after another with a label above each.
Pricing Slide Link
pricing-slide-link
A text link whose arrow slides in from the left as the label settles into place.
Progress Ring Check
progress-ring-check
A task status icon whose dashed ring closes into a spinning arc, fills to its progress, then draws a check or a cross and strikes the label through.
Project Text Swap Button
project-text-swap-button
An outlined pill whose duplicated label swaps vertically on hover.
Projects Arrow Button
projects-arrow-button
A Projects label paired with an outlined circular arrow that slides through itself on hover.
Read More Swap
read-more-swap
A text link whose arrow swaps from the right side to an orange leading arrow on hover.
Scrub Number Field
scrub-number-field
A number field you drag to scrub and click to type, with a ruler that tracks the gesture.
Secure Purchase Button
secure-purchase-button
A purchase button that opens room for a pixel-wave loader, swaps it for a shield once the payment clears, then resets itself.
See More Swap Button
see-more-swap-button
A pill button whose arrow circle swaps sides while its surface changes color.
Sliding Arrow Label
sliding-arrow-label
A text label that gets a bright surface while an arrow slides in beside it.
Sliding Content Tabs
sliding-content-tabs
A compact tab switcher with a sliding active surface and content transition.
Sliding Send Button
sliding-send-button
A bordered share pill whose label glides right as an orange send icon enters from the left.
Sliding Underline Tabs
sliding-underline-tabs
A compact tab switcher with an orange underline that glides between labels.
Social Highlight Cards
social-highlight-cards
Social cards with a luminous top rail, a soft brand-colored wash, and matching icons on hover.
Social Icon Buttons
social-icon-buttons
Circular social links that trade their icon for a brand-colored arrow and glow on hover.
Spotlight Indicator
spotlight-indicator
A glowing rail that slides to the active item in a vertical nav — the same indicator powering this site's sidebar.
Staggered Letter Glow Button
staggered-letter-glow-button
A dark pill with inward orange edge glows and a staggered per-letter upward text swap.
Staggered Letter Text Swap
staggered-letter-text-swap
A surface-free text interaction with a staggered per-letter upward replacement.
Subscribe Shine Button
subscribe-shine-button
A dark subscribe pill with a rotating highlight that traces its edge on hover.
Talk Arrow Reveal Button
talk-arrow-reveal-button
An outlined Talk to us pill that fills with orange and reveals a long arrow.
View More Text Swap
view-more-text-swap
A borderless View More label that swaps vertically on hover.
What's New Glow Button
whats-new-glow-button
A dark, fully rounded button whose orange and blue glows follow the cursor.
White Contact Orbit Button
white-contact-orbit-button
A white Get in touch pill whose arrow settles into a black circular control on hover.
Yellow Fill Preview Button
yellow-fill-preview-button
An outlined Preview in browser button that fills with yellow from the left.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Aurora Download Button
aurora-download-button
A layered blue download button with a luminous rim, directional shadow, and blended hover bloom.
Blur Glide Menu
blur-glide-menu
A nested menu whose steps blur before they glide aside, while the surface animates to the height of the step arriving.
Bounce Checkbox
bounce-checkbox
A checkbox whose fill springs out past the box with a little swell, draws its tick, then strikes the label through and dims it.
Circle Surface Button
circle-surface-button
A circular CTA whose dark surface expands into an orange fill.
Contact Details Reveal
contact-details-reveal
A compact white contact label that shifts upward to reveal muted contact details with an orange accent.
Contact Reveal Button
contact-reveal-button
A circular arrow and label that resolve into a polished contact pill on hover.
Contact Underline Button
contact-underline-button
A compact contact action whose icon turns orange while an underline draws beneath the label.
Cursor Edge Glow Button
cursor-edge-glow-button
A spring-tracked pill light with mirrored edge glows that crossfade as the pointer changes sides.
Cursor Follow Share Button
cursor-follow-share-button
A dark share pill with a glowing send orb that tracks the pointer and a looping upward text swap.
Expanding Contact Button
expanding-contact-button
A pill-shaped call-to-action with an expanding background and arrow icon, adapted from the supplied Webflow export.
Expanding Icon Tabs
expanding-icon-tabs
An icon bar where the chosen tab widens to reveal its label and the rest of the row slides over to make room.
Expanding Newsletter Button
expanding-newsletter-button
An orange newsletter pill with a growing dark circle and an arrow that slides in from the left.
Floating Newsletter Button
floating-newsletter-button
A compact newsletter button that scales and lifts into a soft white glow on hover.
Focus Field
focus-input
An input with a clean animated focus treatment.
Fuse Undo Button
fuse-undo-button
An archive button that turns into Undo and lights an orange fuse around its outline; the fuse holds still while you hover it, so the chance to undo only runs out once you look away.
Get Started Circle Swap
get-started-circle-swap
A bordered CTA whose orange circle exits right as a directional arrow slides into place.
Glow Arrow Button
glow-arrow-button
A bright CTA with a soft glow and a moving arrow on hover.
Gradient Underline Button
gradient-underline-button
A label that scales up as a warm gradient underline grows across it.
Hold to Delete Button
hold-to-delete-button
A delete button that only fires when held: an orange bar fills linearly from left to right as a matching glow builds behind it, snapping back if you let go early and landing on a check with a pulse once it completes.
Hover Glide Cards
hover-glide-cards
One highlight glides from card to card under the pointer, seen only through the cards themselves, so it drains out of one and fills the next.
Icon Swap Button
icon-swap-button
A leading icon slides out as an arrow opens in to take its place, trading without changing the button's width.
Inset Circle Button
inset-circle-button
A circular project CTA that reveals its dark base as the inset surface collapses.
Layered Gradient Button
layered-gradient-button
A dimensional pill with gradient text and subtly shifting layered surfaces.
Magnetic Fill Button
magnetic-fill-button
A magnetic pill button with a bottom-to-top background fill.
Neon Invert Button
neon-invert-button
A bold orange CTA that inverts into a dark, softly glowing surface on hover.
Next Dot Fill Button
next-dot-fill-button
A bordered pill whose leading dot expands into a solid fill while the label swaps for an arrow cue.
Next Reveal Button
next-reveal-button
An outlined arrow control that expands into a bright Next button on hover.
Orange Circle Fill Button
orange-circle-fill-button
An orange outlined pill that fills from a growing circle.
Outline Wipe Button
outline-wipe-button
Hollow stroked lettering that fills with orange behind a rounded bar sweeping left to right.
Preview in Browser Button
preview-browser-button
An outlined pill button with a diagonal arrow that slides through on hover.
Preview Hover Toolbar
preview-hover-toolbar
A thin empty pill that grows wider and taller off its fixed bottom edge when the surrounding preview is hovered, scaling its actions in one after another with a label above each.
Pricing Slide Link
pricing-slide-link
A text link whose arrow slides in from the left as the label settles into place.
Progress Ring Check
progress-ring-check
A task status icon whose dashed ring closes into a spinning arc, fills to its progress, then draws a check or a cross and strikes the label through.
Project Text Swap Button
project-text-swap-button
An outlined pill whose duplicated label swaps vertically on hover.
Projects Arrow Button
projects-arrow-button
A Projects label paired with an outlined circular arrow that slides through itself on hover.
Read More Swap
read-more-swap
A text link whose arrow swaps from the right side to an orange leading arrow on hover.
Scrub Number Field
scrub-number-field
A number field you drag to scrub and click to type, with a ruler that tracks the gesture.
Secure Purchase Button
secure-purchase-button
A purchase button that opens room for a pixel-wave loader, swaps it for a shield once the payment clears, then resets itself.
See More Swap Button
see-more-swap-button
A pill button whose arrow circle swaps sides while its surface changes color.
Sliding Arrow Label
sliding-arrow-label
A text label that gets a bright surface while an arrow slides in beside it.
Sliding Content Tabs
sliding-content-tabs
A compact tab switcher with a sliding active surface and content transition.
Sliding Send Button
sliding-send-button
A bordered share pill whose label glides right as an orange send icon enters from the left.
Sliding Underline Tabs
sliding-underline-tabs
A compact tab switcher with an orange underline that glides between labels.
Social Highlight Cards
social-highlight-cards
Social cards with a luminous top rail, a soft brand-colored wash, and matching icons on hover.
Social Icon Buttons
social-icon-buttons
Circular social links that trade their icon for a brand-colored arrow and glow on hover.
Spotlight Indicator
spotlight-indicator
A glowing rail that slides to the active item in a vertical nav — the same indicator powering this site's sidebar.
Staggered Letter Glow Button
staggered-letter-glow-button
A dark pill with inward orange edge glows and a staggered per-letter upward text swap.
Staggered Letter Text Swap
staggered-letter-text-swap
A surface-free text interaction with a staggered per-letter upward replacement.
Subscribe Shine Button
subscribe-shine-button
A dark subscribe pill with a rotating highlight that traces its edge on hover.
Talk Arrow Reveal Button
talk-arrow-reveal-button
An outlined Talk to us pill that fills with orange and reveals a long arrow.
View More Text Swap
view-more-text-swap
A borderless View More label that swaps vertically on hover.
What's New Glow Button
whats-new-glow-button
A dark, fully rounded button whose orange and blue glows follow the cursor.
White Contact Orbit Button
white-contact-orbit-button
A white Get in touch pill whose arrow settles into a black circular control on hover.
Yellow Fill Preview Button
yellow-fill-preview-button
An outlined Preview in browser button that fills with yellow from the left.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information