Caret Input
キャレットインプット
An input whose cursor glides between positions instead of jumping. The native caret is hidden, so its place has to be worked out: the text before the cursor is rendered into an invisible span inheriting the same font and measured, which sidesteps reconstructing font metrics by hand. A spring carries it from one offset to the next. Built with Framer Motion springs↗↗ and Tailwind CSS.
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { motion } from "framer-motion"
import { useCallback, useEffect, useRef, useState } from "react"
type CaretInputProps = {
placeholder?: string,
defaultValue?: string,
width?: number,
dark?: boolean
How to use it3
"use client"
import { CaretInput } from "@/components/ui/caret-input"
export default function Page() {
return <CaretInput placeholder="Type here" width={280} />
}
Props
CaretInput
| Name | Default | Description |
|---|---|---|
| placeholder | "Type here" | string Placeholder shown while empty |
| defaultValue | "" | string Initial uncontrolled value |
| width | 280 | number Width of the field in pixels |
| dark | false | boolean Render the dark palette |