Morphing Gallery

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

Framer MotionShared layout

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

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

Написать нам Работать с нами

Назад в библиотеку

Загрузка сцены

React component

Morphing Gallery

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