эффекты
Built by Luneka Lab digital agency

Clip Path Unveil

Эффектный reveal для постеров, коллекций, портфолио и модульных сеток.

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

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

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

Clip Path Unveil

'use client';

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

export function ClipPathUnveil() {
  const [open, setOpen] = useState(false);
  return <motion.button onClick={() => setOpen((value) => !value)} animate={{ clipPath: open ? 'inset(0% 0% 0% 0%)' : 'inset(0% 100% 0% 0%)' }} className="aspect-[4/5] rounded-[24px] bg-lime-300" />;
}