v1.0
- Initial release with five presets, Custom mode, responsive interaction, keyboard support and reduced-motion handling.
ComponentFramer · React · TypeScript · Framer Motionv1.0.0
Type ApertureCursor Text Reveal Component for Framer
A cursor-tracked dual-message headline for Framer with five presets, touch, keyboard controls and reduced-motion support.
ResponsiveAccessibility declaredIsolated demo
Interactive demo
Try it as if it were already yours.
Test the interaction, responsive sizes, and real controls without leaving the product page.
Type Aperture / v1.0.0
Opens full viewport inside this same product page.
What it solves
Interactive dual-message typography without writing code
Type Aperture is an interactive text reveal component for Framer. As the cursor moves, a circular mask uncovers a second headline beneath the first; a click or tap expands the reveal from that exact point. Use it for animated hero headlines, portfolio introductions and editorial campaign typography. Built with Framer Motion, with five presets, touch and keyboard support, and reduced-motion handling.
01
Two editable multiline text layers
02
Cursor-tracked circular reveal
03
Expansion from the exact click or touch position
04
Five art-directed presets plus Custom mode
05
Responsive mouse, touch and keyboard behavior
06
Reduced-motion and Framer Canvas handling
Use cases
Documented situations for this product release.
- 01
Portfolio and studio hero sections
- 02
Editorial campaign headlines
- 03
Brand statements with a second meaning
- 04
Interactive case-study openings
- 05
Creative landing pages
Product gallery
Images and videos published specifically for this release.
Published capabilities
Declared and reviewed values for this specific release; they are not inherited automatically by an update.
- Animation
- Yes
- Interaction
- Yes
- Responsive
- Yes
- Dark mode
- No
- Accessibility declared
- Yes
- CMS
- No
- Forms
- No
- Configurable properties
- Yes
Compatibility
- Framer web projects
- Modern desktop browsers
- Modern mobile browsers
- Pointer, touch and keyboard input
Dependencies
- Framer
- Framer Motion
Requirements
- A Framer project
- The verified Framer Component URL
Install and use
These instructions are published as part of this release manifest.
Install
- 01Complete the purchase and open the supplied Framer Component URL.
- 02Paste the Component URL into the target Framer project.
- 03Select Type Aperture on the canvas.
- 04Choose one of the five presets or switch to Custom in the property panel.
- 05Replace the Primary and Reveal messages, then adjust typography, spacing and aperture size.
Documentation
- The component defaults to 1180 × 620 px and adapts below 700 px.
- Use pointer, touch drag or arrow keys to move the aperture.
- Click, tap, Space or Enter to toggle the complete hidden message.
- Reduced-motion and static-renderer modes remove non-essential animation.
Accessibility
The published manifest marks this release as accessible and declares keyboard support in its demo. This is product information, not third-party conformance certification.
- Keyboard use
- Declared supported
- Pointer use
- Declared supported
Performance
The demo loads only when you open it, unmounts when closed, and never adds its dependencies to SolveKit’s main bundle.
Changelog
Licenses
Single-use commercial license
Use Type Aperture in one personal, commercial, or client Framer project. Each additional project requires another license. Redistribution and resale are prohibited.
Download metadata
Published data for identifying this release file and checking it after download.
- File name
- Type-Aperture-v1.0.zip
- File size
- 6.8 KB (6,751 bytes)
- SHA-256
- 1369fa91658bd2ad6b8fe773462e3b227009f6b4c59ff90a5c5add00999eb68c
Frequently asked questions
Does it require code editing?
No. Install it through the supplied Framer Component URL and configure it from Framer's property panel.
Does it work on mobile?
Yes. It supports compact layouts, touch dragging and tap-to-reveal behavior.
Can it be used with a keyboard?
Yes. Arrow keys move the aperture, while Space and Enter toggle the full reveal.
Does it support reduced motion?
Yes. Non-essential transitions and the automatic discovery movement are removed when reduced motion is requested.