Bernadaus Animations

Physics-based micro-interactions and high-performance entry animations for Tailwind CSS. Built on transform and opacity only to ensure 60fps on all devices.

Installation

npm install bernadausanim

Configuration

Add to your tailwind.config.js:

module.exports = {
  plugins: [
    require('bernadausanim')
  ],
}

Usage

Hero Entry

Heavier damping than standard ease-out. Best for large titles (h1).

<h1 class="animate-enter-powerful">
  Hello World
</h1>

Micro-interactions

State-driven utilities for feedback.

<!-- Light diffusion on hover + Tactile scale on click -->
<button class="hover-glow active-press bg-white text-black px-4 py-2 rounded">
  Interact
</button>

Text Effects

Gradient interpolation for headings. Must use with text-transparent.

<h2 class="animate-text-aurora bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-500">
  Luminous Text
</h2>

Surface Effects

Holographic sheen pass.

<div class="animate-glass-sheen bg-neutral-900 border border-white/10">
  Card Content
</div>

License

MIT