Scroll Morph

About

Great design is about transformation. Scroll Morph turns standard images and videos into immersive, scroll-driven experiences. Instead of static layouts, this component orchestrates a fluid performance: pinning your media to the viewport and elegantly reshaping it as the narrative unfolds. It captures the exact "Apple-style" product introduction effect—where content breathes and evolves with the user's interaction—without the headache of custom code.

Demo test here:

https://scrollmorph.framer.website/

Perfect for

• Feature and product sections with pinned media
• Scroll‑tied hero animations
• Storytelling layouts with evolving media
• Case studies and landing pages with media focus

🛠 How to Use (3 Simple Steps)

1. Define the Stage
   Drag the component onto your canvas. The height of the component on your page determines the duration of the animation.
   • Tip: Make the component tall (e.g., 1500px - 2000px) for a slower, smoother cinematic transition.
2. Choose Your Look
   Select a Preset from the properties panel (like "Hero Zoom" or "Card Expand") to instantly apply professional animation logic.
   • Custom Control: Want total freedom? Switch to "Custom" to manually set the Start and End size, radius, and padding.
3. Drop Your Content
   Upload your image or video file. If using video, you can toggle "Play in Canvas" to see it live while you design.
   • Final Touch: Use the Preview Simulation slider to watch the scroll effect happen right inside the Framer editor.

Extra: Custom Cursor

To use a custom cursor only over the media area:

• Select the Scroll Morph component.
• In Style → Pointer, set it to None.
• The inner media area (image/video) will still receive pointer events, allowing you to apply a custom cursor only there.

Refund Policy

1. All Sales are Final
   Due to the digital nature of our Framer components and templates, all purchases are final and non‑refundable. Once you gain access to the source files or the Remix Link, the license to use the product is considered granted, and the transaction cannot be “reversed.”
2. Why no refunds?
   Our products are premium digital assets that are made available instantly upon purchase. Unlike physical goods, digital assets cannot be returned to their original state. By purchasing, you receive immediate and permanent access to a license to use high-end engineering and design code in your professional projects. Ownership of the copyrights and intellectual property remains with the creator(s) at all times.
3. Try Before You Buy
   We encourage you to thoroughly explore our live previews and documentation before making a purchase. Our components are designed to be production‑ready, and we provide detailed visuals of exactly how they function in a live Framer environment, so you can confirm they meet your specific project needs.
4. Technical Support
   While we do not offer refunds, we are fully committed to your success. If you encounter any technical issues or implementation challenges, our support team is available to help you get the component working perfectly in your project. Reach out to us at: matheus@madrepunk.com.