Flip book

Overview

TxFlipBook turns an actual two-sided leaf between a left and a right base page. v-model is the zero-based current right-page index. The leaf's front and back keep their own page contents throughout the turn. Pages come from pages or #page; the component contains no upstream image collection.

Usage

Book, DitherBook and the embedded wide book

The demo provides text pages, original slotted SVG drawings, a current-page scrubber, actual flip events, paper settings and a replayable opening. All three source presentations are available:

The DitherBook opening waits 300ms, uses 140ms fast turns and 70ms intervals; its final turn uses the normal duration, as in the source. The extracted opening waits 800ms, uses 120ms turns and 20ms intervals, and disables visible manual previous/next actions until it ends. The two source entrance poses and 1200/1500ms entrance durations are also retained. intro=false is the reusable component default; the demo explicitly enables source playback.

Best Practices

• Keep id stable and provide text or images you are allowed to display. No Pinterest images or external paper texture are bundled.
• Use #page="{ page, index, side }" for original drawings. It renders on the real left/right pages and front/back of the turning leaf.
• Page content should be non-interactive: the page-wide semantic turning button overlays it. Put application actions outside the book.
• Use v-model:settings to persist editor changes. Individual settings props override the settings object, and the object overrides mode/compact defaults.
• Use mode="extracted-book" size="lg" in the extracted book/chart composition. A parent background click can call previous() or next() after excluding other interactive elements; do not install document-wide click handlers.
• Disable loop for finite documents. The left page before the first page stays blank, and boundary controls become disabled.

API Reference

Props

FlipBookPage has id?: string | number, title?: string, src?: string, alt?: string, content?: string. The default page renders an image when src exists, otherwise title/content. FlipBookSettings contains padding, imageRadius, creaseOpacity, paperColor, and shadowIntensity. FlipBookLabels accepts previous, next, settings, padding, imageRadius, creaseOpacity, paperColor, shadowIntensity, and intro.

The DitherBook editor ranges are padding 0–30, radius/crease 0–40 and shadow 0–48. The extracted editor retains padding/crease 0–100, radius 0–32 and shadow 0–50. Direct props can supply values outside the editor's ranges.

Events

Slots and instance methods

Left/Right turn pages; Home/End request the first/last page. Inputs keep their native keyboard behavior. Both page-wide turning buttons and toolbar buttons have accessible labels and focus rings. Title changes reuse TxTextMorph; no second text-animation engine is introduced.

Technologies

Derived from Amicro's Apache-2.0 Book/DitherBook in dither-charts/DitherBook.tsx, its byte-identical simple-comp/DitherBook.tsx, and the distinct private Book in simple-comp/SimpleCompExtracted.tsx, at commit 43c29ce9cdd16459e3eab4992381b8d35b38776a. Modified Vue/TuffEx source notices and the complete Apache license are distributed; the repository's MIT notice does not replace the file-level license.

The leaf uses native WAAPI with the existing shared spring timing. useMotionActivity owns visibility, document, KeepAlive and reduced-motion gating. Timers and animations are canceled when inactive/unmounted; an in-progress inactive turn commits its destination. Reduced motion skips the opening and still completes every manual turn. Paper grain is locally generated CSS, with no network texture requests.