@blend-text/framer

Framer wrapper for BlendText with Property Controls.

Installation

npm install @blend-text/framer

Usage in Framer

1. Create a Code Component
2. Import the wrapper:

import BlendTextFramer from '@blend-text/framer'

export default BlendTextFramer

Property Controls

The wrapper provides designer-friendly controls for all BlendText properties:

• Text: String input for content
• Animation: Enum selector (Static, Hover, Scroll)
• Steps: Slider for layer count (1-50)
• Distance: Slider for offset distance (0-100px)
• Angle: Slider for offset angle (0-360°)
• Colors: Color pickers for start, end, and top fill
• Typography: Font size, weight, family controls

Features

• Property Controls automatically hide/show based on animation mode
• Flattened font properties for easier control layout
• TypeScript support with proper prop types
• No source maps in production build

Building for Framer

The package builds with sourcemaps disabled and only ESM format for optimal Framer compatibility.