слайдеры
Built by Luneka Lab digital agency

Timeline Frame Slider

Подходит для этапов проекта, roadmap-блоков, аналитики и feature-storytelling секций.

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

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

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

Timeline Frame Slider

'use client';

import { AnimatePresence, motion } from 'framer-motion';
import { useState } from 'react';

const rows = [{ label: 'Sessions', value: 124 }, { label: 'Uplift', value: 38 }];

export function TimelineFrameSlider() {
  const [active, setActive] = useState(0);

  return (
    <div>
      {rows.map((row, index) => <button key={row.label} onClick={() => setActive(index)}>{row.label}</button>)}
      <AnimatePresence mode="wait"><motion.div key={rows[active].label}>{rows[active].value}</motion.div></AnimatePresence>
    </div>
  );
}