Aki UI

Sliced Text

スライステキスト

A word cut in half along its waistline, the two halves pulled apart until you hover and they close. Three copies of the same string do the work: a transparent one holding the box open, and two more clipped to the top and bottom halves of that box with clip-path↗↗ insets. Because the cut is a clip rather than a duplicate crop, the halves always line up with the real glyphs at any font size. Hovering restores both to full insets and fades the top copy out, leaving one uncut word behind. Adapted from Kokonut UI↗↗ under the MIT licence.

Sliced Text

hover to mend

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 Sliced 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 { SlicedText } from "@/components/ui/sliced-text"

export default function Page() {

return (

)

}

Props

SlicedText

Name	Default	Description
text	—	string The word to cut in half
gap	6	number Pixels the two halves are pulled apart
size	36	number Font size in pixels
dark	false	boolean Render the dark palette