Improve book view display area and release v1.1.1

Author: rollecode

CHANGELOG.md

@@ -1,3 +1,10 @@
+### 2026-03-14: 1.1.1
+
+* Move book view background active word to upper area instead of center
+* Increase display area opacity and add backdrop blur in book view
+* Remove max-width constraint from book view display area
+* Add soft feathered edges to book view ORP overlay
+
 ### 2026-03-08: 1.1.0
 
 * Add book view mode with text flowing around a fixed center word

README.md

@@ -1,6 +1,6 @@
 # ⚡ Speed reader
 
-![Version](https://img.shields.io/badge/version-1.1.0-blue?style=for-the-badge)
+![Version](https://img.shields.io/badge/version-1.1.1-blue?style=for-the-badge)
 ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black)
 ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)
 ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "speed-reader",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.jsx

@@ -354,7 +354,7 @@ const BookView = memo(function BookView({ words, currentIndex, sideOpacity, setC
       const containerH = bgContainerRef.current.clientHeight;
       const markerTop = markerRef.current.offsetTop - bgTextRef.current.offsetTop;
       const markerH = markerRef.current.offsetHeight;
-      const offset = containerH / 2 - markerTop - markerH / 2;
+      const offset = containerH * 0.3 - markerTop - markerH / 2;
       bgTextRef.current.style.transform = `translateY(${offset}px)`;
     }
   }, [currentIndex]);

src/index.css

@@ -658,10 +658,12 @@ button:active {
   flex-direction: column;
   align-items: center;
   width: 100%;
-  max-width: 600px;
-  background-color: rgba(10, 10, 10, 0.55);
+  background-color: rgba(10, 10, 10, 0.75);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
   border-radius: 8px;
   padding: 0 16px;
+  box-shadow: 0 0 40px 30px rgba(10, 10, 10, 0.75);
 }
 
 .bv-focal-guide {