{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-input-24","type":"registry:block","title":"Input with pulsed background animation","description":"Input with pulsed background animation","dependencies":[],"registryDependencies":["field","input"],"files":[{"path":"c-input-24.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\n\nexport function Pattern() {\n  const [isFocused, setIsFocused] = useState(false)\n\n  return (\n    <Field className=\"max-w-xs\">\n      <FieldLabel htmlFor=\"pulsed-input\">Pulsed Background</FieldLabel>\n      <div className=\"relative\">\n        <div\n          className={`bg-primary/20 pointer-events-none absolute inset-0 rounded-md transition-opacity duration-300 ${\n            isFocused ? \"opacity-0\" : \"animate-pulse\"\n          }`}\n        />\n        <Input\n          id=\"pulsed-input\"\n          placeholder=\"Animation stops on focus...\"\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          className=\"focus-visible:bg-background relative bg-transparent shadow-none transition-colors duration-300\"\n        />\n      </div>\n    </Field>\n  )\n}","target":"components/examples/c-input-24.tsx"}],"meta":{"order":24}}