TakenCSS v2.2 - Documentation

Getting Started

TakenCSS is a single, self-contained JavaScript file. There's no build step or package manager required. Just add the script tag to the end of your <body> and you're ready to start building.

<!-- Make sure You have takenCSS added -->
<script src="https://takencss.vercel.app/css"></script>
            

Custom Tags

The fastest way to build your UI. TakenCSS automatically styles its own custom HTML tags, giving you beautifully designed components out of the box.

<taken-card>

This is a standard card. Perfect for containing content.

<taken-card>...</taken-card>

<taken-button>

Primary

Neon

Rainbow

Ghost

<taken-button class="r-btn r-btn-primary">...</taken-button>
<taken-button class="r-btn r-btn-neon">...</taken-button>

<taken-box>

A simple content box.

<taken-box class="r-surface">...</taken-box>

JavaScript API

For more dynamic control, TakenCSS exposes a global Taken object with powerful animation utilities.

Taken.sequence()

Animate a list of elements one after the other. This function is async and will wait for each animation to finish before starting the next.

await Taken.sequence(document.querySelectorAll('.seq-box'), 'flip-in-y');

Run Sequence

1

2

3

Taken.stagger()

Animate a list of elements with a cascading delay. This is perfect for creating elegant entrance animations for lists and grids.

Taken.stagger(document.querySelectorAll('.stag-box'), 'roll-in', 80);

Run Stagger

A

B

C

D

E

F

Animation Showcase

The core of the library. Add the anim class followed by an animate-* class to any element. You can also apply animations declaratively using the animate="..." attribute for load or click triggers, or scroll-animate="..." to trigger on viewport entry.

Animations Showcase

Customization

TakenCSS is built with CSS variables. You can easily override the default theme by defining your own values in a <style> tag in your HTML head.

:root {
  --r-bg: #1a1a1a;
  --r-primary: #ff8c00;
  --r-accent: #48d1cc;
  --r-radius: 8px;
}
            