слайдеры

Параллакс-слайдер

Многослойный слайдер, где фон и передний план живут отдельно и дают ощущение глубины.

Framer MotionScroll transforms

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

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

Prompt для GPT

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

Создай современную веб-анимацию «Параллакс-слайдер» для Next.js и React. Нужен эффект: вложенные слои изображения двигаются с разной скоростью при скролле. Используй Framer Motion, Scroll transforms, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

React-компонент

Параллакс-слайдер

'use client';

import { motion, useScroll, useTransform } from 'framer-motion';
import { useRef } from 'react';

export function ParallaxSlider() {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ['start end', 'end start'] });
  const offset = useTransform(scrollYProgress, [0, 1], [-50, 50]);

  return (
    <div ref={ref} className="grid gap-4">
      <div className="relative aspect-[16/9] overflow-hidden rounded-[24px] bg-neutral-900">
        <motion.div style={{ y: offset }} className="absolute inset-0 bg-[radial-gradient(circle,rgba(187,255,0,0.45),transparent_55%)]" />
      </div>
    </div>
  );
}