$12.50 · Enter to ring it up
Teleprompter
13 words · about 5 seconds read aloud
Markup where the component goes, CSS in your stylesheet, script before </body>. In Vue, Svelte or Angular, call initFieldTeleprompter(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-teleprompterAbout this component
A script read off a teleprompter: your words float on the glass in front of the camera lens, roll up past the reading mark line by line, and show mirrored on the monitor below, with a read-aloud time.
- Dependencies
- None
- Difficulty
- Intermediate
- Reduced motion
- Respected
- Theme
- Light and dark
- Follows page color-scheme
Triggers3
- State change
- Focus
- 3D
Techniques4
- Perspective
- CSS transition
- Radial gradient
- Gradient
Accessibility
Keyboard and screen readers
One native textarea named "Script for the teleprompter"; the hood is aria-hidden and the word count and reading time are announced.
Reduced motion
Everything changes at once, without the motion.
Use it in anything you build, commercial and client work included. Licence
More inputs
See all11 of 16 letters, home port Falmouth