Aki UI

Scroll Blur Text

スクロールブラーテキスト

Lines that come into focus as they reach the middle of the frame and soften on the way out, so the eye is always told where to look. Blur, scale and opacity run on the same slice of scroll — sharing one window is what makes the three read as a single movement rather than three effects stacked. Built with Framer Motion useScroll↗↗ and Tailwind CSS.

Lines arrive out of focus

sharpen as they reach their size

and soften again on the way out

so the eye is told where to look

Installation

Install the following dependencies:1

npm install framer-motion

Copy and paste the following code into a new component file:2

"use client"

import { motion, useScroll, useTransform, type MotionValue } from "framer-motion"

import { useRef } from "react"

type ScrollBlurTextProps = {

lines: string[],

blur?: number,

height?: number,

dark?: boolean

How to use it3

"use client"

import { ScrollBlurText } from "@/components/ui/scroll-blur-text"

const lines = ["First line", "Second line", "Third line"]

export default function Page() {

return <ScrollBlurText lines={lines} blur={6} />

}

Props

ScrollBlurText

Name	Default	Description
lines	—	string[] The lines to bring in and out of focus
blur	6	number Blur radius in pixels at the edges of a line's window
height	420	number Height of the scrollable viewport in pixels
dark	false	boolean Render the dark palette