FolioKit

Animated Scroll Section

A Browser mockup animated over scroll.

Installation

pnpm dlx shadcn@latest add https://folio-kit.vercel.app/r/animated-scroll-section.json
npx shadcn@latest add https://folio-kit.vercel.app/r/animated-scroll-section.json
yarn shadcn@latest add https://folio-kit.vercel.app/r/animated-scroll-section.json
bunx shadcn@latest add https://folio-kit.vercel.app/r/animated-scroll-section.json

Usage

import AnimatedScrollSection from "@/components/ui/animated-scroll-section";
<AnimatedScrollSection />

Examples

Image

Add image using imgSrc prop.

Mode & URL

Use the browserMode & url to change browser mode & add Url to the browser ( defalut ones work well).

Transform Factors

Use scaleRange,rotateXRange,translateYRange to control the animation of the browser.

Props

Prop

Type


On this page