Chromatic Media Portal
A cursor-led image portal combining localized chromatic separation, subtle perspective and an interactive mask that reveals a second image.
Quick Start
- Use Add to Framer from your purchase confirmation or receipt, or paste the supplied component URL into your Framer project.
- Give the instance a width and height. Start around 720 × 540 px for desktop or 320 × 420 px for a portrait card. The component follows its frame; it does not enforce an aspect ratio.
- Open Content and choose Base Media and Alternate Media. Both controls accept images.
- Add Alt Text and Alternate Alt, then choose Fit, Position X and Position Y. The same crop settings apply to both images.
- Choose Preset, Reveal → Mask Shape, and Reveal → Trigger.
- Open Framer Preview. Move the pointer, click or tap, and try Enter / Space while the component is focused. Canvas uses a static preview.
A new instance starts with Chromatic Noir, Hover, Circle and Expand on Click enabled. It includes an embedded placeholder, not the photographs or surrounding controls from the demo website. Without an alternate image, chromatic separation and tilt still work; reveal is unavailable.
Presets
| Preset | Treatment | Motion and timing |
|---|---|---|
| Chromatic Noir | Cyan, magenta and a lighter red contribution; 10 px intensity; Screen blend; 80% channel opacity. | Up to 4° tilt, 3 px elastic movement, 65 ms follow lag and 550 ms reveal. |
| Duotone Studio | Two muted channels; 4 px intensity; Lighten blend; 58% channel opacity. | Up to 1.8° tilt, 1 px elastic movement, 90 ms follow lag and 720 ms reveal. |
| Custom | Uses your saved chromatic and motion controls. | Reveal Duration and the detailed motion controls become available. |
Named presets own their visual settings. Choose Custom before adjusting intensity, channel colours, blend, falloff, decay, tilt amount or reveal duration. Custom values are retained when you switch presets. Chromatic → Enabled and Motion → Enable Tilt remain available in named presets. Content, mask shape, trigger, radius, delays and style remain configurable.
Content
| Control | Options or range | Default | Purpose |
|---|---|---|---|
| Base Media | Image | Embedded placeholder | Main image. |
| Alternate Media | Image | Empty | Second image revealed through the mask. |
| Alt Text / Alternate Alt | Text | Empty | Descriptions for assistive technology. Image-picker descriptions are used when these fields are empty. |
| Fit | Cover, Contain, Fill | Cover | Cover crops; Contain preserves the whole image with background space; Fill stretches to the frame. |
| Position X / Position Y | 0–100% | 50% / 50% | Shared image alignment within the frame. |
Use images with similar composition for a seamless transition, or deliberately different subjects for a stronger reveal. Both sources occupy the same box, but photographs with different proportions retain their own crop under Cover. Transparent images are supported; the configured background remains visible in uncovered areas.
Reveal
| Control | Options or range | Default | Purpose |
|---|---|---|---|
| Trigger | Hover, Hold, Click, Always Revealed | Hover | How the second image becomes visible. |
| Mask Shape | Circle, Organic, Rectangle | Circle | Circular, subtly irregular or rectangular window. |
| Reveal Radius | 40–500 px | 140 px | Local window size; scales down in smaller frames. |
| Expand on Click | On, Off | On | Clicking or tapping can expand the window to the whole frame. |
| Duration | 200–1200 ms | 550 ms in Custom | Opening time; closing takes approximately 80% of this value. |
| Hover Delay | 0–2000 ms | 120 ms | Delay before Hover opens the local window. |
| Hold Delay | 100–3000 ms | 450 ms | Pointer dwell time before Hold opens the local window. |
| Corner | 0–100 px | 8 px | Rectangle corner radius; decreases as the mask expands. |
Hover and Hold
Hover opens a local window after Hover Delay. Hold waits for Hold Delay; it means keeping the pointer over the component, not holding down the mouse button. Leaving closes an unpinned window. With Expand on Click enabled, clicking expands and pins the reveal; another click closes it. The local window follows the pointer smoothly.
Click and Always Revealed
Click toggles the second image. When Expand on Click is off, it toggles a local window instead of a full reveal. Always Revealed displays the complete alternate image without a reveal button. Expansion is calculated from the origin to the farthest corner, so clicks near an edge can still cover the complete frame.
Touch and keyboard
On touch devices, Hover and Hold become tap-to-toggle. Tilt and pointer-following colour movement are disabled for touch. Scrolling gestures are not treated as taps.
With a loaded alternate image and Interaction enabled, the component is focusable. Enter or Space toggles the portal from the centre; Escape closes it. Focus has a visible outline. Without an alternate image, the component is not exposed as an unnecessary button.
Chromatic
The effect uses displaced, tinted representations of the main image, softly masked around the pointer. It is localized rather than a permanent colour filter over the photograph. The alternate image appears above the chromatic layers so a complete reveal preserves its colours.
The following detailed controls are available in Custom:
| Control | Options or range | Default | Purpose |
|---|---|---|---|
| Enabled | On, Off | On | Enables the chromatic effect, independently of reveal. |
| Intensity | 0–20 px | 10 px | Displacement strength. Zero hides the chromatic layers. |
| Effect Radius | 80–600 px | 240 px | Area around the pointer affected by colour separation. |
| Falloff | Soft, Medium, Sharp | Soft | Softness of the boundary. |
| Cyan Channel | Colour | #00E7FF | First channel colour. |
| Magenta Channel | Colour | #FF2EBE | Second channel colour. |
| Red Channel | Colour | #FF3A38 | Smaller third-channel contribution. |
| Blend | Screen, Lighten, Difference, Multiply, Normal | Screen | How the colour layers combine. |
| Channel Opacity | 0–100% | 80% | Chromatic layer visibility. |
| Decay | Fast, Normal, Slow | Normal | Rate of colour separation returning to rest after exit. |
Effect Radius, Reveal Radius, displacement and tilt scale down below a 480 px minimum frame dimension. Values in the panel describe the full-size settings. Fast pointer motion adds a bounded contribution, and the start of a reveal briefly increases intensity. Screen and Lighten are good starting points; other blends vary significantly with image colours.
Motion
| Control | Range | Default in Custom | Purpose |
|---|---|---|---|
| Enable Tilt | On, Off | On | Enables perspective rotation. |
| Tilt | 0–10° | 4° | Maximum configured tilt. |
| Perspective | 400–2000 px | 1000 px | Perspective depth. |
| Elastic | 0–8 px | 3 px | Small pointer-responsive translation. |
| Follow Lag | 0–200 ms | 65 ms | Pointer-follow smoothing. |
Tilt and Perspective controls hide when Enable Tilt is off. Motion returns smoothly to neutral on exit. A small interaction scale is derived internally. The animation stops once settled and pauses when offscreen or the page is hidden.
Style and Behavior
| Group / control | Default | Purpose |
|---|---|---|
| Style → Background | #050505 | Loading background and space left by Contain. |
| Style → Radius | 0 px | Frame corner radius, including separate corners. |
| Style → Overlay | None | None, Dark or Custom tint over the complete component. |
| Style → Overlay Color | #050505 | Colour used by Custom overlay. |
| Style → Opacity | 0% | Overlay opacity; has no effect while Overlay is None. |
| Behavior → Interaction | On | Enables pointer and reveal interaction. |
| Behavior → Cursor | Default | Default or Pointer system cursor. |
| Behavior → Button Label | Reveal alternate image | Accessible action label; translate it for your website. |
| Behavior → Canvas Preview | Base | Base, Local or Revealed static editor presentation. |
Canvas Preview changes the editor presentation only. It needs an alternate image for Local or Revealed. The published website follows the configured trigger. Interaction off disables user interaction; Always Revealed can still display the alternate image.
Reduced Motion
The device's prefers-reduced-motion setting is always respected. Pointer-following chromatic motion, tilt, elastic movement and organic morphing are disabled. The reveal becomes a 200 ms crossfade, retaining click, tap and keyboard access. There is no control to override this preference.
Demo and Delivery
The public preview includes photographs, a toolbar and four example instances. Those elements demonstrate the component; they are not part of the purchased standalone component. The default Cursor is Default, while the demo explicitly uses Pointer and Spanish button labels.
Your purchase provides the component's Add to Framer link and a bilingual setup download. Documentation is available in English and Spanish. Supply your own images and confirm that you have permission to use them.
Troubleshooting
The image does not reveal
Choose Alternate Media and wait for it to load. Check Interaction, Trigger and its delay. Always Revealed displays the alternate without a toggle. A failed alternate image is ignored; a failed base image falls back to the placeholder.
Changing intensity or duration has no effect
Choose Custom. Named presets own the detailed visual and timing settings. Also check Chromatic → Enabled, Channel Opacity and the device's reduced-motion preference.
The effect looks too strong in a small card
Use Duotone Studio, or choose Custom and reduce Intensity and Tilt. Smaller frames already scale down the effect and reveal radii.
The crop looks different between images
Use photographs with matching proportions and composition. Fit and Position X / Y are shared; there is no independent crop control for the second image.
Canvas does not animate
This is intentional. Choose Canvas Preview to inspect a static state; use Preview or the published site for interaction.
FAQ
Does this version support video?
No. Version 1.0 is the image edition. It does not accept video or synchronize video playback.
Can I use only the main image?
Yes. The chromatic effect and tilt work without an alternate image.
Does it require a service or additional package?
No. It uses React and Framer with browser styling and animation APIs. There is no external service, API key, required image CDN or extra animation package.
Can I put a title or button over it?
Yes, place separate Framer layers above the component. An overlay that intercepts pointer events can prevent the portal from receiving input in that area.
Limitations
This version supports images only and has no lightbox, navigation action, audio, drag-to-rotate or custom cursor. It has shared crop settings rather than independent positioning for each source. Image loading depends on the supplied asset. Large images and many simultaneously active instances increase rendering cost; smoothness depends on device and browser. CSS masking, blending and SVG filters may vary slightly across browsers.
Changelog
v1.0
Initial release of the image edition.
- Localized chromatic separation, cursor smoothing, subtle tilt and progressive exit decay.
- Circle, Organic and Rectangle reveal masks with Hover, Hold, Click and Always Revealed.
- Chromatic Noir, Duotone Studio and Custom presets.
- Responsive images, touch fallback, keyboard operation and system reduced motion.
- Grouped Framer controls, static Canvas previews and English/Spanish documentation.
arforgelabs.support@proton.me