Paper fold
Line by line the text unfolds from its creases like a folded sheet of paper opening flat, each line a panel hinged to the one above.
- enhancer
- entrance
- fold
- paper
- 3d
- lines
- scroll
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Paper fold example
Every line of this sentence opens like a folded sheet of paper.
Every line of this sentence opens like a folded sheet of paper.
Code
It follows the controls above: change an option and the code changes with it.
<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>
<p class="m-demo-lg" data-motion="paper-fold" data-motion-every="4200">Every line of this sentence opens like a folded sheet of paper.</p>import { PaperFold } from "./motion/react/PaperFold";
<PaperFold>Your content</PaperFold><script setup lang="ts">
import PaperFold from "./motion/vue/PaperFold.vue";
</script>
<template>
<PaperFold>Your content</PaperFold>
</template>const el = document.querySelector("#title");
el.dataset.motion = "paper-fold";
// run the entrance again: axi0Motion.play(el, "paper-fold")The wrappers: PaperFold.tsx (React, TypeScript) and PaperFold.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-duration | 1300 | Time each line takes to open |
data-motion-stagger | 210 | Delay from one line to the next |
data-motion-every | 0 | Fold up and open again this often (0 = once) |
Accessibility
Words stay real text, readable and selectable; only transform, opacity and brightness change, so no layout shifts. Text already on screen when the page loads never hides. Under reduced motion it shows flat at once. Only transform, opacity and paint change, so nothing around it moves. Frames run through the shared loop, which stops off screen, in hidden tabs and under reduced motion; reduced motion shows the final state with no movement.
Size
paper-fold.js is 1.1 KB gzip, with text-kit.js 3.2 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.