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
What it solves
Interactive dual-message typography without writing code
Type Aperture is a responsive cursor text reveal for expressive heroes, portfolio introductions, campaign headlines and editorial storytelling. Move the pointer to uncover a second typographic voice through a circular aperture, then click, tap, Space or Enter to expand the reveal from that exact point.
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 on demand, pauses off-screen, 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.