Paywall

A premium paywall component with a pick your price detent slider, animated numeric price transitions, and a segmented plan control.

byUrvish Mali from Uselayouts

Installation

terminal

pnpm dlx layro-cli add @iurvish/paywall

npx layro-cli add @iurvish/paywall

npx layro-cli add @iurvish/paywall

bunx layro-cli add @iurvish/paywall

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

Code

Demo

"use client";
import { useEffect, useRef, useState } from "react";
import { motion, AnimatePresence } from "motion/react";

const SNAPPY = { type: "spring" as const, stiffness: 420, damping: 34, mass: 0.6 };
const DRAG_SPRING = { type: "spring" as const, stiffness: 900, damping: 60, mass: 0.5 };
// ζ = damping / (2·√(stiffness·mass)). This was 38 → ζ ≈ 1.11, overdamped: a price that eased into place
// instead of landing. 25 puts it at ζ ≈ 0.73, so a digit overshoots its slot once and settles.
const PRICE_SP = { type: "spring" as const, stiffness: 420, damping: 25, mass: 0.7 };

type Plan = "annual" | "lifetime";

const ANNUAL_PRICES = [50, 90, 120, 150, 200];
const LIFETIME_PRICES = [130, 220, 300, 380, 500];