Shape Spinner: Premium Interactions Component by Dolev Brosh

Transform your UI with Shape Spinner. Mask HD video inside organic presets or custom SVGs. Features smart hover sync, kinetic type, and shadow controls. Optimized for 60FPS and 100% no-code. The ultimate tool for high-end motion design.

About this Component

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
1. Paste the component into your project.
2. Choose a preset shape or provide a custom SVG path.
3. Upload media for the fill (Video or Image).
4. 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:
1. Prepare your Shape: Select your vector in Figma and Flatten it (Cmd + E or Ctrl + E) to ensure it is a single, clean path.
2. Copy as SVG: Right-click the flattened shape, navigate to Copy/Paste as, and select Copy as SVG.
3. Paste in Framer: In the component property panel, set the Base Shape to Custom.
4. 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.