The Bent One

A bilingual (English / Spanish) web picture book. The story follows a short line with a bend and the forms a line can take depending on placement and company.

Spanish title: La Doblada.

Live site: the-bent-one-book.stronghandssoftheart.com. Production origin is set at build time via VITE_SITE_URL (default fallback matches that domain).

Source: antoniwan/the-bent-one.

Also in this series

Bilingual web picture books from Strong Hands Soft Heart. Each book is its own repository.

Book	Read	Source
Mia, the Sun, and the Moon / Mia, el Sol y la Luna	live	book-sun-and-moon
The Bent One / La Doblada	live	this repository

Stack

• Svelte 5 + TypeScript
• Vite 8
• Static SPA deploy (Vercel rewrite to index.html)

App version lives in package.json and is stamped in the footer at build time (__APP_VERSION__).

Run locally

npm install
npm run dev

Open the URL Vite prints (typically http://localhost:5173).

npm run build
npm run preview
npm run check

Reader behavior

• Cover: Before we begin / Antes de empezar opens front matter; Begin / Empezar starts page 1. Continue reading appears on the cover when a mid-book position was saved.
• Language: EN / ES toggle; preference is stored for later visits.
• Spanish story copy always uses línea / líneas. A DEV ES F/M control (local npm run dev only) switches the title La Doblada / El Doblado. Document and Open Graph titles stay The Bent One / La Doblada.
• Keyboard: Arrow keys, Space, Enter, Page Up / Page Down turn pages; Home returns to the cover; End jumps to the last screen.
• Touch: swipe left / right; tap the left or right edge of the illustration to go back or forward.
• Reader bar dots jump to a page.
• Each location has a URL (/, /front, /1/one-line, …, /back).

This book does not include read-aloud / Web Speech.

Deploy and SEO

Set VITE_SITE_URL to the production origin (no trailing slash) before build so canonical and Open Graph image URLs match that origin.

Social card: public/og.png (1200×630 bent red line). SVG source: public/og.svg.

Icons: favicon.svg, favicon.ico, favicon-16/32/48.png, apple-touch-icon.png, icon-192.png, icon-512.png, icon-maskable-512.png, safari-pinned-tab.svg.

Crawlers: public/robots.txt, public/sitemap.xml. Meta + JSON-LD live in index.html; language switches update them via src/lib/book/seo.ts.

vercel.json rewrites all routes to index.html so deep links work on a static host.

Project layout

Path	Role
src/lib/book/scenes.ts	Page illustrations (SVG line compositions)
src/lib/book/spreads.ts	Story text, cover / front / back copy, page slugs
src/lib/book/ui.ts	Chrome strings (EN / ES)
src/lib/book/seo.ts	Document meta updates when language changes
src/lib/book/esGender.ts	DEV title tokens (La Doblada / El Doblado)
src/lib/lines/	SVG stroke primitives and geometry helpers
src/lib/book/Book.svelte	Shell, cover, routing, navigation
src/lib/book/ReaderBar.svelte	Footer chrome and language control
LICENSE.md	MIT (code) and CC BY-NC 4.0 (story and art)
TODO.md	Open work and constraints

Editorial notes

Storyboard notes that say “seek the bent line” are art direction only. Reader-facing copy should stay curious and careful: difference as character, noticing with the child, no hunt commands, and no apology for the bend.

See TODO.md, the voice guide comment in src/lib/book/spreads.ts, and docs/MAKING-OF-PROMPTING.md (how the book was directed with agents).

License

Two licenses, on purpose:

• Source code (the reader app): MIT
• Book content (story text, illustrations, and other creative work): CC BY-NC 4.0

Forks and copies of the story are welcome for non-commercial use. Credit Antonio Rodriguez Martinez, name the book, and link back. Commercial use of the story and art stays with the author. Details and the MIT text are in LICENSE.md.