Bionic Reading

Applies the bionic reading technique to your text: the leading letters of each word are wrapped in a <strong> tag and colored, guiding the eye across the passage to support faster reading and comprehension. The output renders live as styled HTML with adjustable fixation level, bold color, and font size, and Copy extracts the plain-text content of the highlighted passage.

1. Paste or edit text in the Input Text textarea (a sample passage is preloaded). 2. Set Fixation Level (1-3) to control how many leading letters are bolded. 3. Pick a Bold Color swatch (Black, Blue, Red, Orange). 4. Adjust Font Size (14-28px) with the slider. 5. Review the highlighted preview and click Copy for the plain text.

Fixation Level caps how many leading characters of each word are bolded; one-letter words are left untouched and values larger than the word length are clamped to the word length. The bold portion is wrapped as <strong style="color:..."> using the chosen Bold Color, where Black maps to the inherited text color. Font Size styles the preview container between 14px and 28px and is formatted as Npx on the slider. The preview is injected via dangerouslySetInnerHTML, and Copy strips the HTML to return only the underlying text.