Aki UI

Scroll Text

スクロールテキスト

A list you scroll through where only the line crossing the middle is fully inked. An IntersectionObserver↗↗ scoped to the scroller decides which one that is, and a rootMargin↗↗ of -45% top and bottom crops the root down to a thin band across its centre — without that crop every visible line qualifies at once and nothing is picked out. Lines also arrive from alternating sides as they come into view. Half-height spacers top and bottom let the first and last items reach the middle. Adapted from Kokonut UI↗↗ under the MIT licence.

TypeScript

React

Next.js

Tailwind CSS

Framer Motion

Supabase

Vercel

Shiki

Installation

Install the following dependencies:1

npm install framer-motion

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

"use client"

/**

* Adapted for Aki UI from Kokonut UI's Scroll Text.

* Original author: @dorianbaffier — https://kokonutui.com

* https://github.com/kokonut-labs/kokonutui

* Reworked here onto the local palette, with shadcn primitives and

* class-variance-authority removed and motion/react swapped for framer-motion.

How to use it3

"use client"

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

export default function Page() {

return (

<ScrollText

items={["TypeScript", "React", "Next.js", "Tailwind CSS"]}

height={300}

Props

ScrollText

Name	Default	Description
items	—	string[] Lines rendered in order inside the scroller
height	300	number Height of the scroll window in pixels
dark	false	boolean Render the dark palette

Name

Default

Description

items

—

string[]

Lines rendered in order inside the scroller

height

300

number

Height of the scroll window in pixels

dark

false

boolean

Render the dark palette