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

Before / After Reveal

Классический before/after-блок для ретуши, кейсов, редизайна и продуктовых сравнений.

React statePointer events
Готовый сниппет для переноса

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

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

Before / After Reveal

'use client';

import { useState } from 'react';

export function BeforeAfterReveal() {
  const [position, setPosition] = useState(50);

  return (
    <div className="relative aspect-[16/10] overflow-hidden rounded-[28px] border border-white/10 bg-neutral-950">
      <div className="absolute inset-0 bg-neutral-800" />
      <div className="absolute inset-y-0 left-0 bg-lime-300" style={{ width: `${position}%` }} />
      <input type="range" min={10} max={90} value={position} onChange={(event) => setPosition(Number(event.target.value))} className="absolute inset-x-6 bottom-6" />
    </div>
  );
}