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

Distortion Hover

Эффект hover для карточек, который добавляет хроматический сдвиг, сканлайны и размытие.

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

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

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

Distortion Hover

'use client';

export function DistortionHover() {
  return (
    <div className="group relative overflow-hidden rounded-[24px] border border-white/10">
      <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(187,255,0,0.35),transparent_60%)] opacity-0 transition group-hover:opacity-100" />
      <div className="aspect-[4/5] bg-neutral-900 transition duration-300 group-hover:scale-105 group-hover:blur-[2px]" />
    </div>
  );
}