эффекты
Built by Luneka Lab digital agency

Staggered Pill Menu

Удобно для фильтров, табов, tag-cloud интерфейсов и маленьких control-panels.

Framer MotionStagger
Готовый сниппет для переноса

У каждой демки есть React-компонент, который можно скопировать и адаптировать под HTML embed или кастомный блок в Tilda. Библиотека собрана Luneka Lab как showroom motion-подходов для клиентских сайтов.

Написать намРаботать с нами
Назад в библиотеку
Загрузка сцены
React component

Staggered Pill Menu

'use client';

import { motion } from 'framer-motion';

const items = ['UI', 'LAB', 'FX', 'GRID'];

export function StaggeredPillMenu() {
  return items.map((item, index) => <motion.button key={item} initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: index * 0.04 }}>{item}</motion.button>);
}