I'm currently playing around with this project as a way to learn more about video capture, animation, Svelte, and video production. Feel free to follow along or fork for your own learning.
A customizable replica of the CNN interface, including:
- animations
- transitions
- sound effects
- multi-user video chat
Clone the repo, npm install, npm run dev and open a browser to localhost:3000.
I'm using Vite for the development environment and build setup. Svelte's .svelte files and syntax are incredibly intuitive, but refer to the official documentation for advanced examples and API reference.
- [-] Layout
- [-] Lower third
- [-] Headline Block
- Animated Headline transitions
- Headline text squeezes to fit container
- Animated Byline and Tagline
- [-] Logo Block
- Live market data *
- Rotate times and stocks
- Hide stocks when market is closed
- Controllable "Live" indicator
- News Ticker
- Animated, loops when content ends
- Program Title with animated highlight
- [-] Headline Block
- [-] Video
- Size and layout transitions
- Multiple layouts
- Download recordings
- [-] Webcam
- Multiple connections *
- Background replacement
- Live view
- Identifier
- Works with 1-3 lines of data
- Includes live local time
- Animated in an out
- [-] Lower third
- [-] Controls
- [-] Basic
- Edit ticker text
- All non-ticker text editable
- Control camera activity
- Advanced
- Orchestration with manual and/or timed transitions
- Multiple views and user roles *
- Synced display across connections *
- [-] Basic
* indicates a feature that needs a server to support it, which will be phase-2 once all client-only features are completed