Skip to content

component

Kinetic Marks

By Erigo Kreatif Innovations

Details

Summary

Living Geometry

Description

Interactive 3D Elements Built by Erigo Kreatif Innovations, Mark transforms simple canvas geometry into living 3D marks that turn, tumble, and come apart on hover. Built for Framer, it gives designers a fast way to create kinetic logos, hero icons, and section markers without touching WebGL or writing custom animation code. Choose from ten distinct bodies (sphere, cube, rings, helix, DNA, wave, vortex, cylinder, lattice, and orbit), each with its own motion: bands that twist, a slice that turns like a Rubik's cube, two circles counter-rotating, a coil that breathes. Every body is cut from one of ten unit shapes (capsule, cube, bar, pyramid, hexagon, diamond, cylinder, plate, bead, or cross), so the same motion can read as soft and organic or hard-edged and mechanical. Hover any mark and it comes apart: each unit leaves on its own beat, travels outward, grows, and squares off, then reassembles the moment the cursor leaves. Fine-tune unit count, unit size, hover spread, hover growth, speed, and color directly from the Framer side panel. No code editor required. Features Animated 3D mark component for Framer, drawn on canvas. No WebGL Ten selectable bodies: sphere, cube, rings, helix, DNA, wave, vortex, cylinder, lattice, orbit Ten selectable unit shapes: capsule, cube, bar, pyramid, hexagon, diamond, cylinder, plate, bead, cross One color accent with automatic lit/shadow shading per body Adjustable unit count, unit size, and overall size Adjustable hover spread and hover growth per instance Adjustable animation speed Smooth take apart / reassemble hover interaction on every body Respects prefers reduced motion and pauses off screen for performance Great for hero eyebrows, kinetic logos, section markers, and loading marks

Introduction

Living Geometry

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400141578/178/248/319/79/15
  • All · #3670