← back to the gallery

ElevenReader: white listening-app landing with phone previews and soft gradient feature panels

Tier
inspiration
Roles
hero, proof, explainer, feature, closing, faq
Feel
light, minimal, saas, cold
Motion
pan, reveal, kinetic
Source
public-site
Site
https://elevenreader.io
Licence
Captured from a Refero-hosted recording and the live site; description only, no redistribution of the source.
Captured
2026-10-08
Captures
frames: https://images.refero.design/styles/refero.design/video/4d608dd6-a450-4a62-9bdb-39eb256ebf7d.mp4
both: https://elevenreader.io

What it does

A quiet white listening introduction leads into a phone over a soft gradient and a press-logo row. Alternating upload, reading and voice examples combine interface previews with photographs. Language and reading-summary chapters precede paired app-download cards and the opening of questions.

Section roster

1. Listening introduction. 2. Gradient phone preview. 3. Press logos. 4. Upload example. 5. Reading photograph. 6. Voice portrait group. 7. Language chapter. 8. Reading summary interface. 9. Paired download cards. 10. Opening FAQ.

Why it works

Phone examples connect broad audio claims to a familiar interface. Soft color fields and small photographic groups vary the rhythm while black actions remain easy to locate.

Source and capture notes

Refero [style page](https://styles.refero.design/style/c51c8371-0e42-4bdf-9766-c9eac5eee9a5) and [recorded video](https://images.refero.design/styles/refero.design/video/4d608dd6-a450-4a62-9bdb-39eb256ebf7d.mp4); [live site](https://elevenreader.io) checked on 2026-10-08. The recording is a point-in-time reference; current site content may differ. Descriptions distinguish the recording from the current page where they differ. Layout and motion notes come from sampled recording frames and automated live captures; interactive controls were not comprehensively tested. The current hero adds a carousel of book covers and the page expands into a listening catalog. The source shows an earlier phone-led sequence and reaches questions without establishing a complete footer.