中文 | English
Reimagining a 30-year-old English classic with AI visuals and modern web technology.
Start your healing learning journey
Many people have bittersweet memories of studying with New Concept English: memorizing entire passages, rewinding cassette tapes, staring at dull black-and-white illustrations...
Visual NCE started from a simple idea: What if a classic textbook from 30 years ago could wear the warm, hand-painted coat of Miyazaki — paired with millisecond-precise modern interactivity? Could learning become something you actually look forward to?
We're not just translating language anymore. We're immersing you in the scene.
Using AI, every illustration across all 4 books has been redrawn in Studio Ghibli style. Each lesson cover tells a story — your study list feels like a curated film collection.
- Scrolling highlight: Text lights up word-by-word as the audio plays — perfectly in sync.
- Click to seek: Tap any sentence to jump directly to that point in the audio.
- Variable speed: 0.5x – 2.0x playback speed to train your ear at any pace.
No blind spots left behind. Built-in sentence grammar breakdowns and vocabulary analysis — click any sentence to reveal a detailed card that helps you truly understand every idiomatic phrase.
Built with a Glassmorphism design language. Whether on a 5K display or a mobile screen, the experience is smooth and immersive.
- Framework: Vue 3 (Composition API) — reactive interactivity at its core.
- Build: Vite — lightning-fast dev and production builds.
- Language: TypeScript — keeping the project solid and maintainable.
- Styling: TailwindCSS — atomic CSS for pixel-perfect design.
- AI: Stable Diffusion / Gemini — painting new life into old lessons.
visual-nce/
├── public/
│ ├── audios/ # NCE audio files (mp3/lrc)
│ └── images/ # Ghibli-style illustrations per lesson
│ ├── nce1/
│ ├── nce2/
│ ├── nce3/
│ └── nce4/
├── src/
│ ├── components/ # Vue components (AudioPlayer, SceneViewer, etc.)
│ ├── data/
│ │ ├── curriculum.json # Course index & metadata
│ │ └── lessons/ # Per-lesson JSON (text, timestamps, analysis)
│ ├── views/ # Page-level views (HomeView, LessonView)
│ ├── types/ # TypeScript type definitions
│ └── utils/
└── scripts/
├── generate_images.py # AI image generation pipeline (Gemini)
├── nce1/ # Storyboard scripts for NCE Book 1
└── nce2/ # Storyboard scripts for NCE Book 2
| Book | Lessons | Audio Sync | Sentence Analysis | Ghibli Illustrations |
|---|---|---|---|---|
| NCE Book 1 | 72 lessons | ✅ | ✅ | ✅ |
| NCE Book 2 | 96 lessons | ✅ | ✅ | ✅ |
| NCE Book 3 | 60 lessons | ✅ | ✅ | 🚧 In Progress |
| NCE Book 4 | 48 lessons | ✅ | ✅ | 🚧 In Progress |
Coming next:
- Mobile app (PWA)
- User progress tracking
- Spaced repetition for vocabulary
-
Clone the repo
git clone https://github.com/xiao2shiqi/visual-nce.git
-
Install dependencies
npm install
-
Start dev server
npm run dev
With 276 lessons worth of content, things slip through the cracks. If you spot:
- Translation errors
- Incorrect sentence breaks
- Typos or bugs
Feel free to open an Issue or submit a Pull Request. Let's build this love letter to English learners together.
- New Concept English — The timeless textbook by L.G. Alexander that inspired this project. All original content belongs to its respective rights holders and is used here solely for non-commercial educational purposes.
- Studio Ghibli — The visual style of this project is inspired by the warmth and artistry of Studio Ghibli films. No official affiliation.
- Google Gemini — Powers the AI image generation pipeline.
- Vue / Vite / TailwindCSS — The modern web foundation that makes this all run smoothly.
This project is licensed under the MIT License.
🚨 Disclaimer: Content in this project is derived from New Concept English for personal learning, research, and communication purposes only. Commercial use is strictly prohibited. If this project infringes on your rights, please contact the author for removal.
"Learning can be healing." —— Author: xiaobin | GitHub: @xiao2shiqi