Skip to content

component

BladeReveal

By Hamim Reza

Details

Summary

BladeReveal is a cinematic image slider for Framer where each new slide sweeps in through staggered vertical blades, with a custom circular cursor that replaces the pointer for…

Description

BladeReveal is a cinematic image slider for Framer where each new slide sweeps in through staggered vertical blades, with a custom circular cursor that replaces the pointer for click-to-navigate browsing. Click the left or right half of the frame and a circular cursor icon flips direction to show which way you're heading, then the next slide reveals through thin animated strips with a Ken Burns zoom, while the title types in letter by letter. WHAT IT DOES Add slides, each with an image, title, chapter label, and optional description. Click either half of the frame to move forward or back, or let it autoplay. Every transition sweeps the incoming image in through staggered blades with a subtle zoom, title animating in character by character. KEY FEATURES Staggered vertical blade-wipe reveal, adjustable blade count and stagger Custom circular cursor for click-to-navigate, flips direction Ken Burns zoom on every incoming slide, adjustable start scale and duration Per-character animated title reveal, not word-by-word Progress bar and numbered counter, both fully optional Optional chapter label and description text per slide Autoplay with configurable interval Hides native cursor, disables click nav automatically on touch Static-safe rendering for the Framer canvas and thumbnails Zero third-party dependencies beyond Framer Motion WHY IT WORKS Most wipe sliders use click zones without a visual cue, leaving navigation to be discovered by accident. BladeReveal's circular cursor makes the interaction obvious the moment someone moves their mouse. PERFECT FOR Portfolio case study intros, agency hero sections, editorial story openers, and any Framer site that wants a cinematic slider people actually know how to use. WHAT'S INCLUDED A single drop-in component. Add slides with image, title, and optional description, then tune blade count, zoom, and cursor through property controls. Drop it in, load your slides, and let visitors click their way through.

Introduction

Cinematic slider & custom cursor

Rank history

Daily rank per list, from the first snapshot — lower is better.

110012001300131999/139/139/149/149/15
  • All · #2927