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 #

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!