Editor Workflows
Focus Writing
A compact focus-mode control turns on, then moves a crisp reading spotlight across three short lines while surrounding copy recedes.
csslight complexitysubtle motionclickmobile-readyaccessible
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
Worth keeping?
Votes steer what gets built next — sign in to cast one, free to read
When to use it
Writing apps, reading modes and editorial tools that need a compact line-focus toggle or distraction-reduction demonstration.
When not to
Long-form reading where dimming context impedes comprehension, or a real caret-linked editor mode is required.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Replace the three short lines and adjust the focus dwell time in next(). Keep the toggle, focus marker and off state visible; re-theme through --pro-* tokens.
Safe to edit
- theme tokens (:root --pro-* values)
- three short focus lines
- focus dwell time in next()
- inactive line opacity and blur
Keep intact
- :root --pro-* token block (shared professional theming API)
- role=button, tabindex and descriptive aria-label on .fwr-stage
- IIFE wrapper, reduced-motion middle-line focus and visibilitychange pause
- unique fwr- class namespace and namespaced keyframes
- theme hook (?theme bootstrap plus forever:theme listener)
Known limitations
- The focus position is illustrative and not tied to a real caret or selection
- The compact component is designed for three short lines; longer copy needs layout adjustment
- Light re-theme uses the --pro-* block; catalog bg/accent describe the dark default
More Editor Workflows components
- Markdown SplitA focused Markdown control flips between readable source and rendered preview, with one large two-state selector designed to stay legible inside a 300px…
- Comment ComposerA single reply control types a useful comment, presses its send action and resolves to a clear sent state without shrinking into a miniature discussion…
- Mention PickerA compact mention field types @ma, reveals one large teammate result, highlights it and resolves into a clear @maya token sized for the public canvas.
- Autosave DraftOne document-status control moves from edited to saving to saved, morphing a neutral dot into a spinner and confirmation mark at clear 300px-tile scale.
- Suggested EditsOne focused inline revision replaces a vague phrase with an exact result, then demonstrates both accept and reject outcomes with large controls.