слайдеры

Морф-галерея

Редакционная галерея с мягким morph-переходом из миниатюры в акцентный кадр.

Framer MotionShared layout

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

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

Prompt для GPT

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

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

React-компонент

Морф-галерея

'use client';

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

const items = ['A', 'B', 'C', 'D', 'E', 'F'];

export function MorphingGallery() {
  const [active, setActive] = useState<string | null>(null);

  return (
    <>
      <div className="grid gap-3 sm:grid-cols-3">
        {items.map((item) => (
          <motion.button key={item} layoutId={item} onClick={() => setActive(item)} className="aspect-square rounded-[20px] bg-neutral-900" />
        ))}
      </div>
      <AnimatePresence>
        {active ? (
          <motion.div layoutId={active} className="fixed inset-10 rounded-[28px] bg-neutral-900" onClick={() => setActive(null)} />
        ) : null}
      </AnimatePresence>
    </>
  );
}