logo

Aki UI

アキ ウイ

Swoosh Text

スウーシュテキスト

Text that stands proud of the page and drops flat when you point at it. It is five stacked text-shadow↗↗ layers at increasing distance, each a step further down a single grey ramp, which the eye reads as one extruded solid rather than five copies. The original ran a neon ramp; the shape of the effect is in the spacing, not the hue, so it survives the move to greys. Hovering animates the same five shadows to zero offset instead of to none, so they collapse smoothly rather than vanishing between two frames. Adapted from Kokonut UI↗↗ under the MIT licence.

Hover Me
Deeper

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 Swoosh Text.
* Original author: @dorianbaffier — https://kokonutui.com
* Copyright (c) 2025 kokonutUI, MIT License.
* 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 { SwooshText } from "@/components/ui/swoosh-text"

export default function Page() {
return (
<SwooshText text="Hover Me" offset={10} />
)
}

Props

SwooshText

NameDefaultDescription
text—

string

The text to extrude

offset10

number

Pixels between the text and the first shadow

size30

number

Font size in pixels

darkfalse

boolean

Render the dark palette