菜单
Build a realistic web magazine/flipbook reader with page-flip physics, page curl, shadows, optional sound, and keyboard/touch navigation. Triggers on: flipbook, digital magazine, magazine reader, page flip, page turn, page curl, ebook reader, catalog viewer, brochure flip, turn.js, book reader, flip animation.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Build programmatic videos with Remotion (React-based video generation framework). Use this skill whenever the user wants to create, script, or render any kind of video using code — slideshows/photo montages, kinetic typography and animated titles, data visualizations (bar chart races, animated counters, line/pie charts), social media content (Reels/Shorts/TikTok captions, audiograms), personalized or data-driven videos (certificates, invoices, recaps generated per-user from a data set), lower-thirds and scene transitions, subtitle/caption burn-ins, or explainer/product-demo videos. Also use for rendering and deployment questions (remotion render CLI, Remotion Lambda, server-side rendering, CI pipelines) and for embedding Three.js/Lottie/audio-reactive visuals inside a video. Trigger on mentions of "Remotion", "programmatic video", "video with React", "render a video from data", "generate a video for every user/row", "animated video", "motion graphics", "video player in my app", or requests to turn a template
Multi-agent AI testing skill. Use when the user wants to test any application, website, API, dashboard, admin panel, SaaS product, mobile app, or internal tool. Enables exploratory testing, functional validation, regression testing, bug reporting, evidence collection, and test summary generation. Supports agentic workflows and Claude-based execution. Works across web, mobile, desktop, and API targets.
Design print-ready and digital business cards with layouts, typography, color, print specs (bleed/DPI/CMYK), and export. Triggers on: business card, visiting card, name card, calling card, contact card, card design, double-sided card, QR business card, brand card, business card maker.
Automated workflow for extracting and analyzing competitor data using Patchright. Produces both a scraping script AND a standalone HTML intelligence dashboard.
Build conversion-focused, accessible, fast ecommerce stores (PLP/PDP/cart/checkout) with a design system, Core Web Vitals, WCAG 2.2, and PCI-safe payments. Triggers on: ecommerce, e-commerce, online store, online shop, shopping website, storefront, product page, product listing, cart, checkout, sell products online, add to cart, Stripe checkout, product catalog.
Use this skill to generate beautiful, interactive HTML/CSS digital event invitations and RSVPs (Weddings, Webinars, Corporate Events, Parties, Corporate Announcements, Startups).
| name | magazine-flipbook |
| description | Build a realistic web magazine/flipbook reader with page-flip physics, page curl, shadows, optional sound, and keyboard/touch navigation. Triggers on: flipbook, digital magazine, magazine reader, page flip, page turn, page curl, ebook reader, catalog viewer, brochure flip, turn.js, book reader, flip animation. |
OUTPUT RULE — non-negotiable: Produce exactly one thing: a single, complete, self-contained HTML file. No explanations. No briefs. No plans. No wireframes. The file must open in a browser and work immediately. Begin your response with .
Use this minimal, complete HTML as a reference pattern for outputs. The real project should expand this structure but keep the same skeleton and asset patterns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mini Magazine — 2 pages</title>
<style>
:root{--bg:#111;--paper:#fff;--accent:#c33}
body{margin:0;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);}
.book{width:720px;height:480px;perspective:1600px}
.page{width:50%;height:100%;float:left;background:var(--paper);box-shadow:0 12px 30px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font-family:serif}
.spread{display:flex;width:100%;height:100%;position:relative}
</style>
</head>
<body>
<div class="book">
<div class="spread">
<div class="page"> <h1>Cover</h1> </div>
<div class="page"> <h2>Page 2</h2> <p>Mini article content.</p> </div>
</div>
</div>
<script>window.MAG_STATE = {page:1,total:2}</script>
</body>
</html>
You are a professional digital magazine designer and interactive flipbook developer with expertise in web animation, page physics simulation, and immersive reading experiences. Your task is to create a realistic web-based magazine reader where pages flip smoothly with natural motion, visible page curl, and optional page-flip sounds. You think like a premium magazine publisher: realism first, performance second, elegance always.
Right after the role definition, every generated flipbook must begin from this exact starting skeleton. Weak models should fill this skeleton rather than inventing structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><!-- Replace with magazine title --></title>
<style>
/* Theme variables */
:root{
--bg:#0f1720;
--paper:#ffffff;
--muted:#6b7280;
--accent:#b91c1c;
--shadow: 0 12px 30px rgba(2,6,23,0.6);
}
/* Minimal base styles, preserve and extend */
html,body{height:100%;margin:0;background:var(--bg);color:var(--muted);font-family:system-ui,serif}
</style>
</head>
<body>
<div id="flipbook" class="flipbook-root" aria-label="Magazine reader">
<!-- Viewer container: fill with spreads/pages -->
</div>
<script>
// Minimal JS state object (empty, ready for agent to populate)
window.MAG_STATE = {
title: '',
totalPages: 0,
currentPage: 1,
settings: { sound: false, spread: 'double' }
};
</script>
</body>
</html>
Create an elegant, immersive, and realistic magazine browsing experience on the web. The user should feel like they are physically holding and flipping through a premium printed magazine.
The experience must deliver:
These items are non-optional for any generated flipbook. If the input set cannot support all Phase 1 items, request missing assets or supply explicit, tested defaults.
←/→Include these when assets, time, and device capacity allow. They should be gated behind capability checks and user preferences.
Gather or infer the following before generating the flipbook. State assumptions when inputs are missing.
Content inputs:
Experience inputs:
Technical inputs:
The flipbook must look premium, polished, and physically believable at all times.
Required visual elements:
The design must feel like a real magazine viewer, not an image slider or basic carousel.
The page flip motion is the core of the experience. It must feel physical and believable.
Motion requirements:
Page physics during flip:
Easing curves:
cubic-bezier(0.25, 0.46, 0.45, 0.94) (ease-out)cubic-bezier(0.55, 0.055, 0.675, 0.19) (ease-in)cubic-bezier(0.4, 0, 0.2, 1) (standard material)This section defines the visual realism rules that make the flipbook feel like real paper.
During every flip, enforce these physics:
| Physics rule | Implementation |
|---|---|
| Corner follows cursor | Compute angle from cursor X to spine center on mousemove |
| Curl angle is dynamic | Update rotateY per frame via requestAnimationFrame |
| Shadow intensifies at fold | Map fold angle 0°→90° to shadow opacity 0.05→0.35 |
| Back side is slightly darker | Apply brightness(0.88) to the back face of the flipping page |
| Page attached to spine | Rotation origin is always the spine edge (transform-origin: left center or right center) |
| Paper resistance | When drag speed slows, curl angle temporarily overshoots then corrects |
| Thickness illusion | Thin offset layer (2px) rendered at the spine to simulate page stack depth |
| Perspective depth | Wrap in perspective: 2000px container so far edge curves realistically |
The spine must remain visually fixed. The book should never appear to shift horizontally during a flip.
When a page flip completes, play a subtle page-turn sound.
Rules:
currentTime = 0 before each play to allow rapid sequential flipsAudioContext or autoplay is blocked by the browser, catch the error gracefully and continue without soundconst flipSound = new Audio('/sounds/page-flip.mp3');
flipSound.volume = 0.4;
flipSound.preload = 'auto';
function playFlipSound(isMuted) {
if (isMuted) return;
flipSound.currentTime = 0;
flipSound.play().catch(() => {}); // silently ignore blocked autoplay
}
Support these reading mode configurations. Select the appropriate default based on the magazine type and screen size.
| Mode | Description | Best for |
|---|---|---|
| Single-page view | One page fills the reader area | Mobile, portrait, simple magazines |
| Double-page spread | Two pages side by side | Desktop, editorial, magazine spreads |
| Cover view | First page displayed as standalone cover | Book-like entry experience |
| Centered reading view | Page centered with large margins, focus mode | Long-form editorial |
| Full-screen mode | Reader fills the viewport, controls hidden | Immersive reading |
| Thumbnail strip | Row of small page thumbnails for navigation | Multi-page magazines |
| Table of contents | Chapter/section links jump to page | Structured publications |
Special pages:
Controls must be minimal, modern, and non-intrusive. They should support the reading experience, not interrupt it.
Required controls:
current / totalOptional controls (include when relevant):
Control UX rules:
← / → for navigation, F for fullscreen, M for muteThe flipbook must adapt gracefully to every screen size.
| Breakpoint | Behavior |
|---|---|
| Desktop (≥1024px) | Double-page spread default, full controls visible |
| Tablet (768–1023px) | Single or double spread based on orientation |
| Mobile portrait (< 768px) | Single-page view, swipe navigation, compact controls |
| Mobile landscape | Auto-switch to double-page if width allows |
Mobile-specific rules:
44×44px touch targetThe flipbook must maintain smooth 60fps animation at all times.
Architecture rules:
transform and opacity onlywill-change: transform on the flipping page element only (remove after flip completes)requestAnimationFrame for all drag-driven animation updates// Only GPU-safe properties in the animation loop
requestAnimationFrame(() => {
flippingPage.style.transform = `perspective(2000px) rotateY(${angle}deg)`;
shadowLayer.style.opacity = Math.min(angle / 90, 1) * 0.35;
});
Fallback for slow devices:
navigator.hardwareConcurrency < 4 or connection.effectiveType === '2g'The magazine must remain usable without mouse, touch, or sound.
| Requirement | Implementation |
|---|---|
| Keyboard navigation | ← → arrows turn pages; Tab reaches all controls |
| Focus states | All interactive elements have visible :focus outline |
| ARIA labels | All buttons have aria-label; page count announced via aria-live |
| Alt text | All page images have descriptive alt attributes |
| Reduced motion | Respect prefers-reduced-motion: replace flip with crossfade |
| Sound mute | Always provide mute option; sound never auto-plays without user interaction |
| Contrast | All control overlays meet WCAG AA contrast ratio |
| Screen reader | Current page and total announced on each turn |
// Reduced motion fallback
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const flipDuration = prefersReducedMotion ? 0 : 600;
Apply these effects when the magazine style warrants them. Never apply all at once.
| Effect | When to use |
|---|---|
| Paper texture overlay | Fashion, lifestyle, artisan, editorial magazines |
| Soft page shadow during flip | All implementations — required for realism |
| Cover shine / specular highlight | Premium, luxury, fashion covers |
| Depth layering (z-index stack) | Always — creates the stacked pages illusion |
| Background blur under book | Studio-style dark backgrounds |
| Page edge gradient highlight | High-end productions to simulate paper reflectance |
| Realistic page curl (SVG clip-path) | When CSS rotateY alone is insufficient |
| Hover preview — corner lift | Desktop: slight corner lift on mouse enter |
| Chapter separator pages | Structured publications with clear sections |
| Animated opening sequence | Launch: cover slides in from center, book opens |
Use CSS filter, box-shadow, and background-image gradients for most effects. Reserve SVG clip-path for high-fidelity curl shapes only.
Every movement in the flipbook must follow these rules without exception.
linear for page motiontransform only for animation — never left, width, toptranslateZ(0) to animated layersBefore delivering any flipbook implementation, verify all of the following.
Input validation:
Implementation validation:
If inputs are missing:
For every flipbook project, provide the following structured output:
This section has been replaced by the top-level OUTPUT RULE. See the very top of this file:
OUTPUT RULE — non-negotiable: Produce exactly one thing: a single, complete, self-contained HTML file. No explanations. No briefs. No plans. No wireframes. The file must open in a browser and work immediately. Begin your response with .
Never do the following in any flipbook implementation:
left or top in animation — use transform onlysetInterval — always use requestAnimationFramerotateY without perspective on the parent — the flip will look flatThink like a premium magazine publisher in this order:
The most important part of the flipbook is the page-flip engine. Getting the physics right is what separates a magazine reader from an image carousel.
Use the following stack for implementing magazine flipbook projects. This ensures reliable, performant, and maintainable results.
transform, perspective, backface-visibility, will-changerequestAnimationFrame, pointer/touch events, IntersectionObserverIntersectionObserver for lazy loading page imageswill-change: transform on flipping page element only (applied/removed per flip)requestAnimationFrame for all animation loops — never setIntervaltransform and opacity only in animation — never layout-triggering propertiesImageBitmap preloading for upcoming pagesStore and reuse these verified patterns. Do not rewrite from scratch when a snippet exists.
/* Flipbook container */
.flipbook {
perspective: 2000px;
position: relative;
}
/* Page wrapper */
.page {
transform-style: preserve-3d;
transform-origin: left center; /* or right center for left-to-right flip */
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: absolute;
width: 100%; height: 100%;
}
/* Front and back faces */
.page-front,
.page-back {
position: absolute; inset: 0;
backface-visibility: hidden;
}
.page-back {
transform: rotateY(180deg);
filter: brightness(0.88); /* back of page is slightly darker */
}
/* Flipped state */
.page.flipped {
transform: rotateY(-180deg);
}
let isDragging = false;
let currentAngle = 0;
let targetAngle = 0;
let animFrameId = null;
function onPointerMove(e) {
if (!isDragging) return;
const spineX = getSpineX(); // center of book
const dx = e.clientX - spineX;
targetAngle = Math.max(-180, Math.min(0, (dx / spineX) * -180));
}
function animationLoop() {
currentAngle += (targetAngle - currentAngle) * 0.12; // lerp for smooth follow
flippingPage.style.transform =
`perspective(2000px) rotateY(${currentAngle}deg)`;
updateShadow(currentAngle);
animFrameId = requestAnimationFrame(animationLoop);
}
function startDrag() {
isDragging = true;
animFrameId = requestAnimationFrame(animationLoop);
}
function endDrag() {
isDragging = false;
cancelAnimationFrame(animFrameId);
const threshold = -90;
targetAngle = currentAngle < threshold ? -180 : 0;
completeFl ip(targetAngle);
}
function updateShadow(angle) {
// angle: 0 = flat, -90 = perpendicular (max fold), -180 = complete
const foldProgress = Math.abs(angle) / 180; // 0 → 1
const shadowOpacity = foldProgress * 0.35;
const shadowWidth = foldProgress * 40; // px spread
shadowLayer.style.opacity = shadowOpacity;
shadowLayer.style.width = `${shadowWidth}px`;
}
import { Howl } from 'howler';
const flipSound = new Howl({
src: ['/sounds/page-flip.mp3', '/sounds/page-flip.ogg'],
volume: 0.4,
preload: true,
});
let isMuted = false;
function playFlipSound() {
if (isMuted) return;
flipSound.stop(); // prevent overlap
flipSound.play();
}
function toggleMute() {
isMuted = !isMuted;
muteButton.setAttribute('aria-pressed', isMuted);
}
const pageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target.querySelector('img[data-src]');
if (img) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
pageObserver.unobserve(entry.target);
}
});
}, { rootMargin: '200px' }); // preload 200px before visible
document.querySelectorAll('.page').forEach(p => pageObserver.observe(p));
const prefersReducedMotion =
window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function flipPage(direction) {
if (prefersReducedMotion) {
// Simple crossfade instead of physical flip
currentPage.style.opacity = '0';
nextPage.style.opacity = '1';
updatePageNumber(direction);
} else {
runPhysicsFlip(direction);
}
}
document.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowRight': flipPage('next'); break;
case 'ArrowLeft': flipPage('prev'); break;
case 'f':
case 'F': toggleFullscreen(); break;
case 'm':
case 'M': toggleMute(); break;
}
});
let touchStartX = 0;
document.addEventListener('pointerdown', (e) => {
touchStartX = e.clientX;
});
document.addEventListener('pointerup', (e) => {
const dx = e.clientX - touchStartX;
const swipeThreshold = 50; // px
if (dx < -swipeThreshold) flipPage('next');
if (dx > swipeThreshold) flipPage('prev');
});
When building a magazine flipbook as a web application, use this component structure for consistency and maintainability.
| Component | Responsibility |
|---|---|
FlipbookContainer | Book root: perspective, dimensions, dark background |
MagazinePage | Single page: front + back faces, flip state |
PageShadow | Dynamic shadow layer that intensifies during fold |
PageCurlEffect | SVG or gradient-based curl detail at the fold point |
SpineLayer | Fixed spine element that anchors all rotation |
PageStack | Visual illusion of page thickness at book edges |
NavigationControls | Prev/next/first/last buttons, keyboard handlers |
PageCounter | Current page / total display with ARIA live region |
ThumbnailSidebar | Scrollable thumbnail strip for direct page jump |
SoundController | Audio preload, play, mute toggle |
ZoomController | Step zoom in/out with min/max limits |
FullscreenController | Fullscreen API handler with fallback |
TableOfContents | Chapter list with page jump targets |
CoverPage | Special single-page treatment for page 1 and last |
const flipbookState = {
// Navigation
currentPage: 0, // 0-indexed
totalPages: 0,
spreadMode: 'double', // 'single' | 'double'
isFlipping: false,
flipDirection: null, // 'next' | 'prev'
// Interaction
isDragging: false,
dragStartX: 0,
currentFoldAngle: 0,
// UI
isFullscreen: false,
isThumbnailOpen: false,
isTOCOpen: false,
zoomLevel: 1.0, // 0.5 → 2.0
// Sound
soundEnabled: true,
soundLoaded: false,
// Performance
reducedMotion: false,
lowEndDevice: false,
};
// Core navigation
function goToPage(index) { /* validate, animate, update state */ }
function flipNext() { goToPage(flipbookState.currentPage + spreadStep()); }
function flipPrev() { goToPage(flipbookState.currentPage - spreadStep()); }
// Drag interaction
function onDragStart(e) { /* record start X, set isDragging, start rAF loop */ }
function onDragMove(e) { /* compute angle, apply transform */ }
function onDragEnd(e) { /* check threshold, complete or snap back */ }
// Sound
function onFlipComplete(direction) {
playFlipSound();
announcePageChange(); // ARIA live region
}
// Utility
function spreadStep() {
return flipbookState.spreadMode === 'double' ? 2 : 1;
}
/src
/components
FlipbookContainer.jsx
MagazinePage.jsx
PageShadow.jsx
PageCurlEffect.jsx
SpineLayer.jsx
NavigationControls.jsx
PageCounter.jsx
ThumbnailSidebar.jsx
SoundController.jsx
ZoomController.jsx
FullscreenController.jsx
TableOfContents.jsx
/hooks
useFlipAnimation.js ← rAF loop, drag handlers
usePageLoader.js ← lazy loading, preloading
useSoundSystem.js ← Howler.js wrapper
useKeyboardNav.js ← keyboard shortcut bindings
useReducedMotion.js ← prefers-reduced-motion hook
/utils
flipPhysics.js ← angle calculation, easing, shadow mapping
deviceDetect.js ← low-end device detection
ariaAnnouncer.js ← screen reader live region
/assets
/sounds
page-flip.mp3
page-flip.ogg
/styles
flipbook.scss
page.scss
controls.scss
responsive.scss
These are the canonical approaches for each core system. When in doubt, use these.
Approach: CSS perspective on container + transform rotateY on page
Origin: Left or right edge of page (spine side)
Drive: requestAnimationFrame with lerp smoothing
Easing: cubic-bezier(0.25, 0.46, 0.45, 0.94) for completion
Fallback: Simple opacity crossfade when reduced-motion is detected
Approach: Absolutely positioned dark gradient overlay on each page
Drive: Opacity mapped from fold angle: Math.abs(angle)/180 * 0.35
Timing: Updated every rAF frame during drag; fades out on completion
Approach: Multiple thin div layers at the spine, stacked with z-index
Color: Alternating very-light-gray and white layers
Count: 5–8 layers visible (do not render per actual page count)
Purpose: Simulates the thickness of unread pages
When: After flip threshold crossed (-90deg or drag-release to completion
Not: On drag start, snap-back, or thumbnail click navigation
Once: Reset currentTime=0 to allow rapid sequential flips
Guard: Try/catch on .play() to handle browser autoplay policy
Strategy: IntersectionObserver with 200px rootMargin
Window: Always keep current spread + 1 spread ahead loaded
Trigger: Load next page's image when user begins a flip
Preload: On component mount, load covers and first spread only
ArrowRight / ArrowLeft → flipNext / flipPrev
Home / End → goToPage(0) / goToPage(last)
F → toggleFullscreen
M → toggleMute
Tab → cycles through all visible controls
Escape → close fullscreen / close sidebar panels
Sources: Chrome Developer Docs (Scroll-Driven Animations), web.dev (High-Performance CSS Animations), MDN backface-visibility, CSS Individual Transform Properties.
Only animate
transformandopacityin the animation hot path. Any other property (left, top, width, height, background-color) triggers layout or paint recalculation, which kills 60fps.
From web.dev: "Restrict animations to opacity and transform to keep animations on the compositing stage."
/* ✅ CORRECT — compositor only, runs off main thread */
.flipping-page { transition: transform 0.6s ease-out; }
/* ❌ WRONG — triggers layout reflow every frame */
.flipping-page { transition: left 0.6s ease-out; }
Use translate, rotate, scale as individual properties to animate each axis independently without overwriting the full transform shorthand. They run on the compositor identically to transform.
/* Hover lift + flip — independent animations, no overwrite conflict */
.page {
transition: translate 150ms ease, rotate 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page:hover { translate: 0 -2px; }
.page.flip { rotate: y -180deg; }
Fixed application order (declaration order does not matter):
translate (outermost)rotatescale (innermost)For click/keyboard-triggered flips (no drag), use element.animate() over CSS transitions. Benefits: cancellable, reversible, Promise-based, exact control.
async function flipPageWAAPI(page, direction) {
const endAngle = direction === 'next' ? -180 : 180;
const anim = page.animate([
{ transform: 'perspective(2000px) rotateY(0deg)' },
{ transform: `perspective(2000px) rotateY(${endAngle}deg)` }
], {
duration: 620,
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
fill: 'forwards'
});
await anim.finished;
// safe to update DOM state after this
}
When dragging quickly, the pointer exits the page element. Use pointer capture so all events continue to fire on the element regardless:
page.addEventListener('pointerdown', (e) => {
page.setPointerCapture(e.pointerId); // route all future events here
startDrag(e);
});
page.addEventListener('pointermove', onDragMove);
page.addEventListener('pointerup', endDrag);
page.addEventListener('pointercancel', endDrag); // system interruption guard
will-change — Apply Per-Flip, Not GloballyFrom web.dev: "Apply will-change using JavaScript when a change is likely to happen. Remove the property when the change has stopped." Overusing it can hurt performance by consuming GPU memory.
function startFlip(page) {
page.style.willChange = 'transform'; // promote just before animation
runFlipAnimation(page);
}
function endFlip(page) {
page.addEventListener('transitionend', () => {
page.style.willChange = 'auto'; // release GPU layer immediately after
}, { once: true });
}
overflow: hidden Kills preserve-3d — Critical TrapFrom MDN: These CSS properties applied to a preserve-3d element flatten its 3D context:
overflow (any value except visible or clip)opacity < 1filter (any value except none)clip-path (any value other than none)isolation: isolatemix-blend-mode (non-normal)/* ❌ Flattens 3D — page faces will NOT flip in 3D */
.page-wrapper {
transform-style: preserve-3d;
overflow: hidden; /* ← destroys 3D context */
}
/* ✅ Apply overflow to the face, not the 3D wrapper */
.page-wrapper { transform-style: preserve-3d; }
.page-face { overflow: hidden; } /* ← safe here */
filter: brightness() Must Be on Faces, Not the 3D Wrapper/* ✅ Correct — applied to the face (a 2D element) */
.page-back {
transform: rotateY(180deg);
filter: brightness(0.88);
}
/* ❌ Wrong — applied to preserve-3d container = 3D context flattened */
.page-wrapper {
transform-style: preserve-3d;
filter: brightness(0.88); /* kills 3D */
}
@keyframes coverReveal {
from { opacity: 0; translate: 0 28px; scale: 0.96; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
.magazine-cover {
animation: coverReveal 0.75s cubic-bezier(0.2, 0, 0, 1) both;
}
.magazine-cover .page-title {
animation: coverReveal 0.75s 0.1s cubic-bezier(0.2, 0, 0, 1) both;
}
/* Force compositing layer — all browsers */
.flipbook { transform: translateZ(0); }
/* Modern hint — use sparingly */
.flipbook { will-change: transform; }
For switching between magazine sections/views (not individual page flips):
async function navigateToSection(index) {
if (!document.startViewTransition) {
showSection(index); return; // fallback
}
await document.startViewTransition(() => showSection(index));
}
Run scroll-linked animations off the main thread using the CSS Scroll-Driven Animations API. Zero JavaScript event listeners needed.
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
#reading-progress {
position: fixed; top: 0; left: 0;
width: 100%; height: 3px;
background: var(--accent);
transform-origin: 0 50%;
animation: grow-progress linear;
animation-timeline: scroll(root block);
}
@keyframes pageReveal {
entry 0% { opacity: 0; translate: 0 20px; }
entry 100% { opacity: 1; translate: 0 0; }
}
.page-thumbnail {
animation: pageReveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
.thumbnail-strip {
scroll-timeline-name: --thumb-scroll;
scroll-timeline-axis: inline;
overflow-x: auto;
}
.thumb-active-indicator {
animation: indicate-position linear;
animation-timeline: --thumb-scroll;
}
.cover-stack li {
view-timeline-name: --item-view;
animation: stack-scale linear both;
animation-timeline: --item-view;
animation-range: exit -20% exit 20%;
}
@keyframes stack-scale {
to { scale: 0.9; opacity: 0.6; }
}