zeba_academy_vhs_ui
A Flutter package that brings authentic VHS-inspired visual effects to modern applications. Create nostalgic retro experiences with animated VHS distortion, CRT scanlines, static noise, analog overlays, and RGB-split typography.
Features
VHS Distortion
- Animated horizontal VHS tracking distortion
- Adjustable distortion intensity
- Smooth analog tape movement simulation
CRT Scanlines
- Classic CRT monitor scanline rendering
- Customizable opacity
- Lightweight and performant implementation
Static Noise
- Animated television static effects
- Realistic analog noise simulation
- Configurable intensity
Analog Overlays
- Vintage display overlays
- Screen artifacts and analog effects
- Retro monitor aesthetics
Retro Typography
- RGB channel split text effects
- VHS-inspired title rendering
- Custom text styling support
All-in-One VHS Container
- Apply multiple VHS effects with a single widget
- Easy integration into existing Flutter applications
Installation
Add the package to your pubspec.yaml:
dependencies:
zeba_academy_vhs_ui: ^1.0.0
Install dependencies:
flutter pub get
Import the package:
import 'package:zeba_academy_vhs_ui/zeba_academy_vhs_ui.dart';
Quick Start
import 'package:flutter/material.dart';
import 'package:zeba_academy_vhs_ui/zeba_academy_vhs_ui.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.black,
body: Center(
child: VHSContainer(
child: Container(
width: 350,
height: 220,
color: Colors.black,
child: const Center(
child: VHSRetroText(
'ZEBA ACADEMY',
style: TextStyle(
fontSize: 32,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
),
);
}
}
Available Widgets
VHSContainer
Applies multiple VHS effects automatically.
VHSContainer(
child: YourWidget(),
)
VHSDistortion
Animated VHS tracking distortion.
VHSDistortion(
intensity: 4,
child: YourWidget(),
)
VHSScanlines
CRT scanline effect.
const VHSScanlines(
opacity: 0.15,
)
VHSStaticNoise
Animated television static.
const VHSStaticNoise(
opacity: 0.05,
)
VHSAnalogOverlay
Analog display overlay effects.
const VHSAnalogOverlay()
VHSRetroText
Retro RGB split typography.
const VHSRetroText(
'RETRO MODE',
style: TextStyle(
fontSize: 28,
color: Colors.white,
),
)
Example
Create a retro VHS-style screen:
VHSContainer(
child: Container(
color: Colors.black,
child: const Center(
child: VHSRetroText(
'PLAY',
style: TextStyle(
fontSize: 48,
color: Colors.white,
),
),
),
),
)
Platform Support
| Platform | Supported |
|---|---|
| Android | ✅ |
| iOS | ✅ |
| Web | ✅ |
| Windows | ✅ |
| macOS | ✅ |
| Linux | ✅ |
Performance
The package is designed to be lightweight and efficient:
- No external runtime dependencies
- Optimized custom painters
- Minimal widget overhead
- Smooth animations
- Cross-platform compatibility
Roadmap
Future releases may include:
- VHS tracking glitches
- Chromatic aberration effects
- CRT screen curvature
- VHS timestamps
- Recording indicators
- VHS player widgets
- Additional retro presets
- Advanced analog artifacts
License
This project is licensed under the GNU General Public License v3.0 (GPL-3.0).
Copyright (C) 2026 Zeba Academy
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or any later version.
For more details, see the LICENSE file or visit:
https://www.gnu.org/licenses/gpl-3.0.en.html
About Me
✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.
You can learn more about me and my work at https://sufyanism.com/ or connect with me on LinkedIn:
https://www.linkedin.com/in/sufyanism
Your All-in-One Learning Hub!
🚀 Explore courses and resources in coding, technology, and development at Zeba Academy.
Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.
Level up your tech game today! 💻✨
Resources
- Main Website: https://zeba.academy
- Coding Platform: https://code.zeba.academy
- YouTube: https://www.youtube.com/@zeba.academy
- Instagram: https://www.instagram.com/zeba.academy/
Contributing
Contributions, issues, and feature requests are welcome.
Feel free to submit pull requests and help improve the package.
Support
If you find this package useful, consider starring the repository and sharing it with the Flutter community.
Thank you for using zeba_academy_vhs_ui!