Skip to content
Onycx-ui
Onycx-ui
ComponentsDocsInstall
ESC
62 componentsReact + Tailwind CSS

Animated React components

Find scroll effects, hero sections, galleries, and buttons for React and Tailwind CSS. Try them in the browser, adjust the settings, then copy the TypeScript into your project.

Browse the libraryInstallation
Components
62
Categories
12
Scroll scenes
12
No extra packages
28
Coverflow CarouselLive preview
Customize or copy the carousel

Live

Try the components

Move over the tilt card, try a button, or switch to another demo. Open the component to see its props and source.

ONYCX Zeta, amber flacon on dark wood01Men

Zeta

Amber power, cut in gold.

  • Amber
  • Wood
  • Intense
Amber WoodyView →
Live · 01 / 05Open Tilt Card

Three ways to use motion

Open any study to try the interaction and see the code behind it.

Tell a story as the page scrolls

Keep each chapter in view long enough to read. As the next card slides over it, the previous one tilts back to show where you are in the sequence.

Try Stacking Cards

Give the pointer something to move

The product image, card, and highlight move at different depths. Try it with your pointer, then check the still version in reduced motion.

Try Tilt Card

Make room for the gallery on a phone

The gallery moves sideways with page scroll on larger screens. On smaller screens it becomes a native horizontal scroller.

Try Horizontal Rail

Workflow

From preview to project

Check the fit

Try the same button in a wide or narrow frame.

Library

Browse by category

See all 62 components

Principles

Before you ship

Reduced motion

Check the reduced-motion version of any animation you add to your site.

Smooth scrolling

If you use Lenis with GSAP, mount the scroll provider once in your layout.

Screen sizes

Test the component at phone, tablet, and desktop widths with your own content.

Demo forms

Connect form submissions to your own service before publishing.

Browse the libraryRead the installation guide