Skip to main content

Animated Interests Picker

Tag-based interests picker with spring animations on selection and deselection.

Micro InteractionReactFramer Motion
CSSCustom CSS

Manual

Create a file and paste the following code into it.

src/App.tsx
1
2
3
4
5
6
7
8
9
10
11
import Demo from "@/components/demo";

function App() {
  return (
    <div className="flex h-dvh w-full items-center justify-center">
      <Demo />
    </div>
  );
}

export default App;

Update the import paths to match your project setup.

Similar components

Status Badge Table

Max

Morphing Dropdown

SVG Branch Connector

Tool Calls Section

Resource details

PublishedFebruary 19, 2026
CategoryMicro Interaction
ReactFramer Motion