Paper Effects Kit
A tactile collection of interaction components and effects for expressive Framer prototypes.
Explore components
Read the guide
PAPER EFFECTS
What is inside
19 code files, one calm paper language.
Every file is original Framer code with property controls for colours, labels, sizes and timing. Drop the components into any project, put the overrides on your own layers and keep your design system.
- 14 components and 5 overrides
- Property controls for colours, labels and timing
- Respects reduced motion
- Only React and Framer
- Desktop, tablet and phone
Hero and background
- 01PaperFieldHero field of paper tiles that keeps clear of your text, follows the pointer and ripples on click.
- 02DotCloudA cloud of paper cards that takes a different shape for every step.
- 03PaperSkylineFooter game: sheets fall and stack into a paper skyline, a click drops the next one.
Data and process
- 04PaperStackA stack of sheets that grows with a value, driven by EffortCalculator or your own events.
- 05EffortCalculatorTwo sliders estimate yearly effort and value, the result drives PaperStack.
- 06ProcessStagesThree paper stacks grow step by step while a sheet travels between them.
- 07DocumentDemoReceipts file themselves from an inbox into a table with date, vendor and amount.
- 08PaperGridDemoScattered cards sort themselves into a clean table on a button press.
- 09BlockTabsNumbered building blocks with a detail panel, usable with the keyboard.
Interaction
- 10ClickEchoA paper echo on every click: cards spray out and a ring fades.
- 11CustomCursorDot and ring cursor that grows over links and shows labels over chosen targets.
- 12MagneticHoverOverride: buttons and cards lean towards the pointer and snap back.
- 13TextDecodeOverride: headlines resolve from scrambled glyphs, letter by letter.
- 14LogoSpinOverride: a logo turns like a coin every few seconds and on hover.
- 15SectionRevealOverride: sections open with a mask wipe as they scroll into view.
- 16ScrollToTopOverride: the logo scrolls smoothly back to the top instead of reloading.
Media
- 17EditorialImageResponsive image frame with fixed height or aspect ratio, crop and radius.
- 18MediaCrumbleLayer over an image or video that crumbles its corners into paper on hover.
- 19LoopVideoSilent looping video, lazy loaded, with poster, radius and reduced motion support.
DotCloud
DotCloud turns an ambient field of points into a responsive visual surface. Use it to make state changes visible through shape and density.
PaperStack + EffortCalculator
PaperStack translates a number into a satisfying physical stack. Pair it with EffortCalculator to turn an editable operational estimate into a live visual metric.
Automation effort calculator
Estimate the yearly manual effort based on your current weekly volume.
At this volume an automated process usually pays for itself quickly.
PaperSkyline
PaperSkyline turns small cells into an evolving paper landscape. Use different pace and grid settings to move from quiet texture to a more active system cue.
ProcessStages
ProcessStages gives a quiet rhythm to a multi-step idea. Change the labels and tempo to turn a generic sequence into a branded process narrative.
DocumentDemo
DocumentDemo makes a back-office workflow feel legible at a glance. Use it where a sequence of sorting, checking, or assigning needs a human-scale explanation.
PaperGridDemo
PaperGridDemo stages a move from scattered paper to structured data. Adjust the number of cards and columns to match the density of the story you want to tell.
BlockTabs + ClickEcho
BlockTabs uses simple, focused blocks to make complex sequences approachable. ClickEcho leaves a brief interaction trace inside a chosen container, helping every tap feel intentional.
Click within this paper field
EditorialImage + MediaCrumble + LoopVideo
EditorialImage gives media a considered frame, while MediaCrumble reacts directly over it. LoopVideo provides the same calm presentation for moving material without adding interface noise.
Paper Effects Kit, an interaction component pack for Framer.
Back to top
Pack details