Create Stunning Video Mockups & Screenshots with Professional Device Frames.
Check out what you can create with Presenta! Below are some examples of our video exports and high-quality screenshots.
demo1.mp4
demo2.mp4
|
|
Presenta is a powerful web-based application designed to elevate your presentation game. It helps creators, developers, and designers generate high-quality video mockups and screenshots by wrapping content in realistic device frames.
Presenting digital products often requires complex tools like After Effects or generic mockup generators that lack flexibility. Users struggle to create smooth, realistic scrolling animations or precise screenshots without diving into heavy proprietary software.
Presenta provides a lightweight, browser-based solution. By combining a FastAPI backend with a high-performance Vanilla JS frontend, it offers real-time rendering on an HTML Canvas. Users can upload images or videos, apply device skins (like Browsers or iPhones), and define custom animation paths.
The tool includes a sophisticated Smart Dropdown system for better UI usability and Security best practices (Rate Limiting, Trusted Hosts) to ensure a safe production environment.
Presenta is engineered for both ease of use and professional output.
Instantly wrap your content in professional frames.
- 🖥️ Browser Window: A modern, clean browser interface with a customizable address bar.
- 📱 Mobile Devices: Realistic iPhone frames for mobile content showcases.
- 📐 Responsive: Automatically adjusts to 16:9, 9:16, or 1:1 aspect ratios.
Create silky smooth scrolling videos without keyframing nightmares.
- 🌊 Human-Like Scrolling: Simulates natural reading patterns with pauses and variable speeds.
- ⏱️ Custom Timeline: Add drag-and-drop stops on the timeline to control exactly where the scroll pauses.
- 👀 Live Preview: Hover over timeline stops to instantly preview the frame.
Experience a glitch-free interface.
- 🧠 Intelligent Dropdowns: Menus automatically detect screen edges and flip upwards to prevent clipping.
- 📏 Dynamic Resizing: Dropdown lists adjust their height based on available viewport space.
- 🛡️ Scroll & Click Safety: Enhanced event handling ensures menus stay open during interaction but close when necessary.
Built with production safety in mind.
- 🚦 Rate Limiting: Protects resources with
slowapi(60 requests/min). - 🔐 Secure Headers: Implements blocking XSS, Clickjacking, and MIME-sniffing protections.
- 🕵️ Host Validation: Strictly verifies Host headers to prevent injection attacks.
Presenta leverages a modern, clean architecture for maximum performance and easy deployment.
| Technology | Purpose | Why it was Chosen |
|---|---|---|
| Python (FastAPI) | Backend Server | High performance, easy async support, and great ecosystem for security middleware. |
| Vanilla JavaScript | Frontend Logic | Zero-dependency approach ensures blazing fast load times and direct DOM manipulation. |
| HTML5 Canvas | Rendering Engine | Allows for real-time video compositing and frame generation in the browser. |
| Vercel | Hosting | Seamless serverless deployment for Python apps with global CDN distribution. |
📂 Presenta/
├── 📄 main.py # Entry point: FastAPI app, Middleware, and Routes
├── 📄 requirements.txt # Python dependencies
├── 📄 vercel.json # Config for Serverless deployment
├── 📂 static/
│ ├── 📂 css/ # Modern, variable-based CSS
│ └── 📂 js/
│ ├── 📄 app.js # UI Interaction logic
│ └── 📄 renderer.js # Core Canvas rendering and animation engine
├── 📂 templates/
│ └── 📄 index.html # Main application view (Jinja2)
└── 📄 README.md # Project documentationFollow these steps to set up Presenta on your local machine.
- Python 3.8+
- pip package manager
git clone https://github.com/your-username/presenta.git
cd presenta# Windows
python -m venv venv
.\venv\Scripts\Activate
# macOS/Linux
python3 -m venv venv
source venv/bin/activatepip install -r requirements.txtpython main.pyOpen your browser and navigate to: http://127.0.0.1:8000
Presenta is optimized for Vercel.
- Install Vercel CLI:
npm i -g vercel - Deploy:
vercel --prod(Thevercel.jsonfile handles all routing and Python runtime configuration automatically)
Contributions are always welcome! Whether it's a new device frame, CSS tweaks, or better animation curves.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
⬆️ Back to Top