Shape Spinner

Shape Spinner is a lightweight Framer component designed for advanced motion effects.

Shape Spinner is a lightweight Framer component designed for advanced motion effects. It enables seamless video and image masking within organic shapes, paired with highly customizable typography paths.Core Features Organic Masking : Includes 7 geometric and blob presets. Supports Custom SVG Paths for unique brand shapes. Hover Interaction : Integrated Pause/Resume logic. Synchronizes shape rotation and scale with text movement on hover. Precision Shadows : Path-based drop-shadow system. Unlike standard box-shadows, the depth effect follows the SVG contour. Typography Control : Independent text paths with full control over speed, direction, repeats, and spacing. Custom Cursors : Support for image-based cursors with adjustable size mapping. Performance : Built with optimized TypeScript for consistent 60FPS rendering.Quick Setup Paste the component into your project. Choose a preset shape or provide a custom SVG path. Upload media for the fill (Video or Image). Configure typography and hover transitions via the property panel. How to Use Custom SVG Shapes from Figma To use a unique brand shape or custom vector, follow these steps: Prepare your Shape: Select your vector in Figma and Flatten it (Cmd + E or Ctrl + E) to ensure it is a single, clean path. Copy as SVG: Right-click the flattened shape, navigate to Copy/Paste as, and select Copy as SVG. Paste in Framer: In the component property panel, set the Base Shape to Custom. Insert Path: Paste the copied code directly into the SVG Path text field. The component will automatically extract the path data and wrap your text around it.

Kinetic typography & organic video masks