'use client'; import { motion } from 'framer-motion'; import { useMemo, useRef, useState } from 'react'; import { cn } from '@/lib/utils'; interface FeedbackInput01Props { maxLength?: number; placeholder?: string; className?: string; } const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max); const interpolateColor = (start: string, end: string, amount: number) => { const toRgb = (hex: string) => { const normalized = hex.replace('#', ''); const full = normalized.length === 3 ? normalized .split('') .map((char) => `${char}${char}`) .join('') : normalized; const int = parseInt(full, 16); return { r: (int >> 16) & 255, g: (int >> 8) & 255, b: int & 255 }; }; const from = toRgb(start); const to = toRgb(end); const mix = (a: number, b: number) => Math.round(a + (b - a) * amount); return `rgb(${mix(from.r, to.r)}, ${mix(from.g, to.g)}, ${mix(from.b, to.b)})`; }; export function FeedbackInput01({ maxLength = 30, placeholder = 'Share your idea…', className }: FeedbackInput01Props) { const [value, setValue] = useState(''); const previousLength = useRef(0); const [shakeKey, setShakeKey] = useState(0); const trimmedMax = Math.max(1, maxLength); const progress = clamp(value.length / trimmedMax, 0, 1); const strokeColor = useMemo( () => interpolateColor('#4ecb8e', '#ff5b5b', progress), [progress] ); const radius = 14; const circumference = 2 * Math.PI * radius; const dashOffset = circumference * (1 - progress); const handleChange = (event: React.ChangeEvent) => { const nextValue = event.target.value; if (nextValue.length > trimmedMax) return; const nextLength = nextValue.length; if (nextLength === trimmedMax && previousLength.current < trimmedMax) { setShakeKey((prev) => prev + 1); } previousLength.current = nextLength; setValue(nextValue); }; return (

Feedback {value.length}/{trimmedMax}

0 ? 'shake' : 'rest'} variants={{ rest: { x: 0, rotate: 0 }, shake: { x: [0, -2, 2, -2, 2, 0], rotate: [0, -6, 6, -6, 6, 0] } }} transition={{ duration: 0.38, ease: 'easeInOut' }} className="flex items-center justify-center" aria-hidden="true" >

{value.length}

Keep it short. A few words is perfect.

); } export default function FeedbackInput01Demo() { return ; }

Playful Feedback Input

Tech

Category