3D Book

An interactive 3D book component with page flip animations.

Installation

terminal

pnpm dlx layro-cli add @iurvish/3d-book

npx layro-cli add @iurvish/3d-book

npx layro-cli add @iurvish/3d-book

bunx layro-cli add @iurvish/3d-book

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { useRef, useState } from "react";

export default function InteractiveBook() {
  const bookRef = useRef<HTMLDivElement>(null);
  const [progress, setProgress] = useState(0);
  const [isDragging, setIsDragging] = useState(false);

  // Linear interpolation function
  const lerp = (a: number, b: number, t: number) => a + (b - a) * t;

  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
    if (!bookRef.current) return;