Canonical vs Hand-written
Слева — каноническая реализация из каталога (Aceternity / MagicUI / MotionPrimitives), как по докам. Справа — моя версия из step8/step9. Все на одних базовых либах (framer-motion, React). Где разница — пометил под каждым блоком.
Border Beam
via MagicUI
canonical · MagicUI
MagicUI source
Анимированная рамка
Луч conic-gradient бежит по периметру через offset-path.
ours · hand-written
my impl
Анимированная рамка
Conic-gradient через ::before + rotate 1turn по spin-beam keyframe.
Разница: Canonical использует
offset-path + WebKitMaskComposite: xor — луч следует точно по периметру с углом anchor. У меня — псевдо-эффект через rotate-anim + conic-gradient на ::before. Визуально похоже, но canonical чище на округлых углах + поддерживает variable size/duration через CSS-переменные.Number Ticker
via MagicUI
canonical · MagicUI
пациентов
возвращаются (%)
ours · hand-written
0+пациентов
0%возвращаются
Разница: Canonical использует
useSpring framer-motion (физика пружины) — поэтому есть характерный «overshoot» в конце, более естественно. Ours — RAF + cubic ease-out, плавно но без physics. Canonical поддерживает направление up/down + decimal places. Numbers форматируются через Intl.NumberFormat (locale-aware).Spotlight (hover-card)
via Aceternity
canonical · Aceternity
ours · hand-written
my impl
Свет за курсором
CSS-переменные обновляются на mousemove + radial-gradient.
Разница: Canonical хранит position в React state — каждое движение = re-render компонента. Ours пишет напрямую в CSS-переменную (один раз в DOM, без re-render) — производительнее на больших списках spotlight-карточек. Логика hover/blur одинаковая.
3D Tilt Card
via Aceternity
canonical · Aceternity
Aceternity01
Имплантация
от 38 000 ₽ · цифровой протокол
ours · hand-written
my impl01
Имплантация
от 38 000 ₽ · цифровой протокол
Разница: Canonical — instant transform с
transition: transform 200ms ease-linear (CSS transition догоняет цель). Ours — useSpring с stiffness/damping (физическая пружина, инерция). Canonical резче на быстром mouseout. Ours — мягче, как у Apple. Угол наклона у меня больше (16°) — у Aceternity ~22° (mouse/25). Реализационно canonical проще (нет hooks, прямая запись в style).Magnetic Button
via MotionPrimitives
canonical · MotionPrimitives
ours · hand-written
Разница: Canonical использует
style={x: springX, y: springY} — framer-motion shortcut. Это удобнее, но не HW-accelerated (по Emil) и в нашей связке Next 16 + framer-motion 12 триггерит баг Offsets must be monotonically non-decreasing через раз. Ours использует style.transform = translate3d(...) через mv.on("change") listener — обходит баг и быстрее на main thread. Intensity у canonical 0.6 (тянется сильно), у меня 0.35 (мягко).Cursor Trail
via MotionPrimitives
canonical · MotionPrimitives
ours · hand-written
Разница: Логика одинаковая — точки спавнятся на mousemove, удаляются через setTimeout. У canonical точки исчезают через scale → 0 (сжимаются в нулевую точку, что Emil критикует — «ничего в реальном мире не сжимается до нуля»). Ours — scale → 0.4 + opacity → 0 (мягкое исчезновение). Цвет у canonical purple/violet, у меня gold-accent. Trail длина у меня капается на 15 точках (slice(-15)), у canonical безлимит — может тормозить при быстром движении.
— конец сравнения —