слайдеры

Слайдер до/после

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

React statePointer events

Подробнее и перенос

Здесь собраны живое демо, prompt для генерации похожего решения и готовый React-сниппет для переноса в HTML embed или кастомный блок Tilda.

Prompt для GPT

Готовая формулировка для генерации похожего эффекта

Создай современную веб-анимацию «Слайдер до/после» для Next.js и React. Нужен эффект: сравнение двух состояний через draggable-разделитель. Используй React state, Pointer events, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

React-компонент

Слайдер до/после

'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>
  );
}