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.