The ultimate interactive storytelling tool for Framer.
The CMS Dynamic Sketch component isn't just an image—it's a fully customizable interaction system. It utilizes a "Color-Spill" technique where a transparent overlay reveals itself over a base sketch, accompanied by a CMS-driven tooltip.
Fully Customizable Triggers: This component gives you granular control over how the effect is activated. You can easily toggle and customize:
Desktop Hover: Create a fluid, immersive reveal as the mouse glides over the sketch.
Mobile Tap/Click: Ensure a functional experience for touchscreens with a dedicated click trigger that toggles the overlay and popup.
Transition Curves: Because it's built natively, you can swap between Spring or Ease transitions to change the "feel" of the color spill (from snappy and modern to slow and organic).
Why this is a must-have:
CMS Power: Manage all your labels and descriptions from one central database.
Lightweight: No heavy Lottie files or GIFs—just two PNGs and Framer’s native engine.
Adaptable: Use it as a simple image reveal, or a complex interactive map/diagram.
Map your CMS: In the Component properties, link the Text Field to your CMS collection to populate the popups automatically.
Asset Swap: Upload your Initial_Sketch and your Color_Overlay (PNG with transparency) into the image variables.
Configure Triggers: * Select the component on your canvas.
In the Styles/Interactions panel, customize the Hover state for your desktop breakpoint.
Set the On Tap transition for mobile to ensure the popup stays visible while the user reads it.
Style the Popup: Open the component master to adjust the backdrop blur, border radius, and typography of the tooltip to match your brand.
To achieve the seamless "Color-Spill" effect, your images must be perfectly synchronized. This component relies on two identical-sized layers:
The Base: Your initial sketch (JPG or PNG).
The Overlay: A transparent PNG containing only the color/detail, exported at the exact same pixel dimensions as the base.
When the trigger is activated, the overlay sits perfectly atop the sketch, creating a magic reveal that feels like the drawing is coming to life in real-time.
Cray
