Letterpress card
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldLetterpress(el) on the mounted element instead.
HTML
CSS
JavaScript
Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Install with shadcn
Needs a free account token. Get a token
npx shadcn@latest add @movin/input-letterpressAbout this component
A business card filled in where it lies: name, role and email are pressed into heavy cotton stock letter by letter, the monogram follows the name, crop marks frame the line being set and the card tilts toward the pointer.
- Dependencies
- None
- Difficulty
- Advanced
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Mouse tracking
- 3D
Techniques3
- Mouse tracking
- CSS variables
- Keyframes
Accessibility
Keyboard and screen readers
Three native inputs named Name, Role and Email with matching autocomplete; the art is aria-hidden. Focus shows a caret and crop marks round the line.
Reduced motion
Everything changes at once, without the motion.
Use it in anything you build, commercial and client work included. Licence
More inputs
See all132 characters left
6 of 12 letters, cut in one piece