BranchesTags

Repository files navigation

speed-reader

Read documents at lightning speed. A simple Preact app. This is an app to help you read text quickly. You can read much faster when you only see one word at a time. This removes the need to scan lines of text, which slows your brain down way more than you think.

View the project

Screenshot of the Speed Reader app in action

Using the app

Copy and paste some an article you find on the web into the text box. Use the slider in the middle of the screen to adjust the speed at which words are shown to you. You can use the slider to go backwards if you missed something!

Click the Globe icon in the header to autoload the content from a URL. Support must be added per-URL, as every site displays their content differently. Currently supports BBC News, Wired, and Medium.

Initial code setup

Thanks for wanting to try this out!

Get building

git clone https://github.com/danlaush/speed-reader.git
cd speed-reader
npm install
npm install -g preact-cli
npm run dev

Get deploying (to my heroku)

About tools

This project used the Preact CLI to get off the ground, as I'd never used Preact and have only poked around in React. It requires installing preact-cli globally.

Future features

This is a work in progress and is currently in the prototype phase. Potential extensions:

  • Share a URL to the app, and it opens with the URL's article text already loaded -- great for mobile
  • Make a browser extension - one-click speed reading
  • Make the progress bar interactive - drag it like a video
  • Make the speed slider behave like a controller joystick (this was the idea that got me into this project)
    • Snaps back to the middle (zero WPM) when you let go
    • Pushes back (resistance) at the high end of the scale

Side note

There are a ton of apps and services already out there that do this. This idea started with seeing a GIF posted to Facebook illustrating the idea of reading quickly one word at a time, and I started building without looking into competitors.

Deployment Process

npm run build
hero static:deploy

About

Read documents at lightning speed. A simple Preact app. | Status: Prototype, online

speed-reader-preact.herokuapp.com/

Resources

Readme
Activity

Stars

3 stars

Watchers

2 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
speed-reader
Read documents at lightning speed. A simple Preact app.
This is an app to help you read text quickly. You can read much faster when you only see one word at a time. This removes the need to scan lines of text, which slows your brain down way more than you think.
View the project
Screenshot of the Speed Reader app in action
Using the app
Copy and paste some an article you find on the web into the text box. Use the slider in the middle of the screen to adjust the speed at which words are shown to you. You can use the slider to go backwards if you missed something!
Click the Globe icon in the header to autoload the content from a URL. Support must be added per-URL, as every site displays their content differently. Currently supports BBC News, Wired, and Medium.
Initial code setup
Thanks for wanting to try this out!
Get building
git clone https://github.com/danlaush/speed-reader.git
cd speed-reader
npm install
npm install -g preact-cli
npm run dev

Get deploying (to my heroku)
About tools
This project used the Preact CLI to get off the ground, as I'd never used Preact and have only poked around in React. It requires installing preact-cli globally.
Future features
This is a work in progress and is currently in the prototype phase. Potential extensions:
  • Share a URL to the app, and it opens with the URL's article text already loaded -- great for mobile
  • Make a browser extension - one-click speed reading
  • Make the progress bar interactive - drag it like a video
  • Make the speed slider behave like a controller joystick (this was the idea that got me into this project)

    • Snaps back to the middle (zero WPM) when you let go
    • Pushes back (resistance) at the high end of the scale
Side note
There are a ton of apps and services already out there that do this. This idea started with seeing a GIF posted to Facebook illustrating the idea of reading quickly one word at a time, and I started building without looking into competitors.
Deployment Process
npm run build
hero static:deploy

About
Read documents at lightning speed. A simple Preact app. | Status: Prototype, online
speed-reader-preact.herokuapp.com/
Resources
Readme
Activity
Stars
3 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
speed-reader
Read documents at lightning speed. A simple Preact app.
This is an app to help you read text quickly. You can read much faster when you only see one word at a time. This removes the need to scan lines of text, which slows your brain down way more than you think.
View the project
Screenshot of the Speed Reader app in action
Using the app
Copy and paste some an article you find on the web into the text box. Use the slider in the middle of the screen to adjust the speed at which words are shown to you. You can use the slider to go backwards if you missed something!
Click the Globe icon in the header to autoload the content from a URL. Support must be added per-URL, as every site displays their content differently. Currently supports BBC News, Wired, and Medium.
Initial code setup
Thanks for wanting to try this out!
Get building
git clone https://github.com/danlaush/speed-reader.git
cd speed-reader
npm install
npm install -g preact-cli
npm run dev

Get deploying (to my heroku)
About tools
This project used the Preact CLI to get off the ground, as I'd never used Preact and have only poked around in React. It requires installing preact-cli globally.
Future features
This is a work in progress and is currently in the prototype phase. Potential extensions:
  • Share a URL to the app, and it opens with the URL's article text already loaded -- great for mobile
  • Make a browser extension - one-click speed reading
  • Make the progress bar interactive - drag it like a video
  • Make the speed slider behave like a controller joystick (this was the idea that got me into this project)

    • Snaps back to the middle (zero WPM) when you let go
    • Pushes back (resistance) at the high end of the scale
Side note
There are a ton of apps and services already out there that do this. This idea started with seeing a GIF posted to Facebook illustrating the idea of reading quickly one word at a time, and I started building without looking into competitors.
Deployment Process
npm run build
hero static:deploy

About
Read documents at lightning speed. A simple Preact app. | Status: Prototype, online
speed-reader-preact.herokuapp.com/
Resources
Readme
Activity
Stars
3 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
speed-reader
Read documents at lightning speed. A simple Preact app.
This is an app to help you read text quickly. You can read much faster when you only see one word at a time. This removes the need to scan lines of text, which slows your brain down way more than you think.
View the project
Screenshot of the Speed Reader app in action
Using the app
Copy and paste some an article you find on the web into the text box. Use the slider in the middle of the screen to adjust the speed at which words are shown to you. You can use the slider to go backwards if you missed something!
Click the Globe icon in the header to autoload the content from a URL. Support must be added per-URL, as every site displays their content differently. Currently supports BBC News, Wired, and Medium.
Initial code setup
Thanks for wanting to try this out!
Get building
git clone https://github.com/danlaush/speed-reader.git
cd speed-reader
npm install
npm install -g preact-cli
npm run dev

Get deploying (to my heroku)
About tools
This project used the Preact CLI to get off the ground, as I'd never used Preact and have only poked around in React. It requires installing preact-cli globally.
Future features
This is a work in progress and is currently in the prototype phase. Potential extensions:
  • Share a URL to the app, and it opens with the URL's article text already loaded -- great for mobile
  • Make a browser extension - one-click speed reading
  • Make the progress bar interactive - drag it like a video
  • Make the speed slider behave like a controller joystick (this was the idea that got me into this project)

    • Snaps back to the middle (zero WPM) when you let go
    • Pushes back (resistance) at the high end of the scale
Side note
There are a ton of apps and services already out there that do this. This idea started with seeing a GIF posted to Facebook illustrating the idea of reading quickly one word at a time, and I started building without looking into competitors.
Deployment Process
npm run build
hero static:deploy

About
Read documents at lightning speed. A simple Preact app. | Status: Prototype, online
speed-reader-preact.herokuapp.com/
Resources
Readme
Activity
Stars
3 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
speed-reader
Read documents at lightning speed. A simple Preact app.
This is an app to help you read text quickly. You can read much faster when you only see one word at a time. This removes the need to scan lines of text, which slows your brain down way more than you think.
View the project
Screenshot of the Speed Reader app in action
Using the app
Copy and paste some an article you find on the web into the text box. Use the slider in the middle of the screen to adjust the speed at which words are shown to you. You can use the slider to go backwards if you missed something!
Click the Globe icon in the header to autoload the content from a URL. Support must be added per-URL, as every site displays their content differently. Currently supports BBC News, Wired, and Medium.
Initial code setup
Thanks for wanting to try this out!
Get building
git clone https://github.com/danlaush/speed-reader.git
cd speed-reader
npm install
npm install -g preact-cli
npm run dev

Get deploying (to my heroku)
About tools
This project used the Preact CLI to get off the ground, as I'd never used Preact and have only poked around in React. It requires installing preact-cli globally.
Future features
This is a work in progress and is currently in the prototype phase. Potential extensions:
  • Share a URL to the app, and it opens with the URL's article text already loaded -- great for mobile
  • Make a browser extension - one-click speed reading
  • Make the progress bar interactive - drag it like a video
  • Make the speed slider behave like a controller joystick (this was the idea that got me into this project)

    • Snaps back to the middle (zero WPM) when you let go
    • Pushes back (resistance) at the high end of the scale
Side note
There are a ton of apps and services already out there that do this. This idea started with seeing a GIF posted to Facebook illustrating the idea of reading quickly one word at a time, and I started building without looking into competitors.
Deployment Process
npm run build
hero static:deploy

About
Read documents at lightning speed. A simple Preact app. | Status: Prototype, online
speed-reader-preact.herokuapp.com/
Resources
Readme
Activity
Stars
3 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
speed-reader
Read documents at lightning speed. A simple Preact app.
This is an app to help you read text quickly. You can read much faster when you only see one word at a time. This removes the need to scan lines of text, which slows your brain down way more than you think.
View the project
Screenshot of the Speed Reader app in action
Using the app
Copy and paste some an article you find on the web into the text box. Use the slider in the middle of the screen to adjust the speed at which words are shown to you. You can use the slider to go backwards if you missed something!
Click the Globe icon in the header to autoload the content from a URL. Support must be added per-URL, as every site displays their content differently. Currently supports BBC News, Wired, and Medium.
Initial code setup
Thanks for wanting to try this out!
Get building
git clone https://github.com/danlaush/speed-reader.git
cd speed-reader
npm install
npm install -g preact-cli
npm run dev

Get deploying (to my heroku)
About tools
This project used the Preact CLI to get off the ground, as I'd never used Preact and have only poked around in React. It requires installing preact-cli globally.
Future features
This is a work in progress and is currently in the prototype phase. Potential extensions:
  • Share a URL to the app, and it opens with the URL's article text already loaded -- great for mobile
  • Make a browser extension - one-click speed reading
  • Make the progress bar interactive - drag it like a video
  • Make the speed slider behave like a controller joystick (this was the idea that got me into this project)

    • Snaps back to the middle (zero WPM) when you let go
    • Pushes back (resistance) at the high end of the scale
Side note
There are a ton of apps and services already out there that do this. This idea started with seeing a GIF posted to Facebook illustrating the idea of reading quickly one word at a time, and I started building without looking into competitors.
Deployment Process
npm run build
hero static:deploy

About
Read documents at lightning speed. A simple Preact app. | Status: Prototype, online
speed-reader-preact.herokuapp.com/
Resources
Readme
Activity
Stars
3 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
speed-reader
Read documents at lightning speed. A simple Preact app.
This is an app to help you read text quickly. You can read much faster when you only see one word at a time. This removes the need to scan lines of text, which slows your brain down way more than you think.
View the project
Screenshot of the Speed Reader app in action
Using the app
Copy and paste some an article you find on the web into the text box. Use the slider in the middle of the screen to adjust the speed at which words are shown to you. You can use the slider to go backwards if you missed something!
Click the Globe icon in the header to autoload the content from a URL. Support must be added per-URL, as every site displays their content differently. Currently supports BBC News, Wired, and Medium.
Initial code setup
Thanks for wanting to try this out!
Get building
git clone https://github.com/danlaush/speed-reader.git
cd speed-reader
npm install
npm install -g preact-cli
npm run dev

Get deploying (to my heroku)
About tools
This project used the Preact CLI to get off the ground, as I'd never used Preact and have only poked around in React. It requires installing preact-cli globally.
Future features
This is a work in progress and is currently in the prototype phase. Potential extensions:
  • Share a URL to the app, and it opens with the URL's article text already loaded -- great for mobile
  • Make a browser extension - one-click speed reading
  • Make the progress bar interactive - drag it like a video
  • Make the speed slider behave like a controller joystick (this was the idea that got me into this project)

    • Snaps back to the middle (zero WPM) when you let go
    • Pushes back (resistance) at the high end of the scale
Side note
There are a ton of apps and services already out there that do this. This idea started with seeing a GIF posted to Facebook illustrating the idea of reading quickly one word at a time, and I started building without looking into competitors.
Deployment Process
npm run build
hero static:deploy

About
Read documents at lightning speed. A simple Preact app. | Status: Prototype, online
speed-reader-preact.herokuapp.com/
Resources
Readme
Activity
Stars
3 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
speed-reader
Read documents at lightning speed. A simple Preact app.
This is an app to help you read text quickly. You can read much faster when you only see one word at a time. This removes the need to scan lines of text, which slows your brain down way more than you think.
View the project
Screenshot of the Speed Reader app in action
Using the app
Copy and paste some an article you find on the web into the text box. Use the slider in the middle of the screen to adjust the speed at which words are shown to you. You can use the slider to go backwards if you missed something!
Click the Globe icon in the header to autoload the content from a URL. Support must be added per-URL, as every site displays their content differently. Currently supports BBC News, Wired, and Medium.
Initial code setup
Thanks for wanting to try this out!
Get building
git clone https://github.com/danlaush/speed-reader.git
cd speed-reader
npm install
npm install -g preact-cli
npm run dev

Get deploying (to my heroku)
About tools
This project used the Preact CLI to get off the ground, as I'd never used Preact and have only poked around in React. It requires installing preact-cli globally.
Future features
This is a work in progress and is currently in the prototype phase. Potential extensions:
  • Share a URL to the app, and it opens with the URL's article text already loaded -- great for mobile
  • Make a browser extension - one-click speed reading
  • Make the progress bar interactive - drag it like a video
  • Make the speed slider behave like a controller joystick (this was the idea that got me into this project)

    • Snaps back to the middle (zero WPM) when you let go
    • Pushes back (resistance) at the high end of the scale
Side note
There are a ton of apps and services already out there that do this. This idea started with seeing a GIF posted to Facebook illustrating the idea of reading quickly one word at a time, and I started building without looking into competitors.
Deployment Process
npm run build
hero static:deploy

About
Read documents at lightning speed. A simple Preact app. | Status: Prototype, online
speed-reader-preact.herokuapp.com/
Resources
Readme
Activity
Stars
3 stars
Watchers
2 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages