Documentation

Welcome to Lofti UI a collection of premium, cinematic, animation-first UI components built for designers, developers, and creators who believe interfaces should feel alive. Lofti UI isn’t another utility kit or theme bundle. It’s motion identity a visual language expressed through movement, softness, depth, and intention.

Every component here is crafted to move with grace. Smooth easing. Gentle magnetics. Cinematic reveals. Micro-depth you feel more than you see. You don’t “set up” Lofti you copy, paste, and your UI breathes.

What is Lofti UI?

Lofti UI is a curated library of animated UI components built for modern web products. Every piece is fully editable, readable, and made for expansion. This isn’t a closed-box library you’re not importing animations, you’re owning them.

Copy-paste ready no installation required.
Engineered around motion identity, not static UI kits.
Works instantly with React, Next.js, and Tailwind CSS.
Designed for interfaces that want personality and presence.

Why Lofti UI?

Most UI today is safe. Predictable. Mechanically correct but emotionally flat. Lofti UI adds softness, depth, and response a touch of life that makes interfaces feel human.

Most UI Libraries	Lofti UI
Static components	Expressive, animated components
Generic visual identity	Cinematic visual personality
Utility-first demos	Emotion-first interactions
Requires heavy customization	Works beautifully on paste

GSAP Only, By Philosophy

Motion is the core of Lofti UI not an add-on. And when motion is identity, tooling matters.

GSAP gives us the precision, velocity damping, and smoothing that no CSS transition or animation library matches at component-level motion.

Pixel-accurate easing curves
Responsive hover & interactive motion
Precise control over timelines and inertia
Better frame smoothness than CSS transitions

Framer Motion is great for page transitions. GSAP is unmatched for expressive micro-interactions. Lofti is about expression so we use GSAP.

How to Get Started

There’s nothing to install. No CLI. No npm. No setup. Just browse → copy → paste → done.

Example:

example.tsx

import { MagneticButton } from "@/components/MagneticButton";

export default function Example() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-[#0b0b0b]">
      <MagneticButton>
        Hover Me
      </MagneticButton>
    </div>
  );
}

The Lofti Philosophy

Interfaces should feel alive not loud, not distracting alive. Motion isn’t decoration. It’s communication.

We animate to guide emotion. To create presence. To introduce softness. To feel human.

Start Exploring

Begin where personality begins motion.

→ Buttons → Magnetic Button

Welcome to Lofti UI. Let’s build UI that moves people literally and emotionally.