“Terminal”
Create an authentic command-line experience with this interactive terminal component for Framer. Features real-time text streaming, custom commands, interactive dialogues, and image support.
Component Details
Instructions
Copy and paste the component into your Framer project, then adjust the property controls in the right panel to customize and configure it for your website.
About
A fully interactive and customizable terminal component that brings the command-line experience to your Framer projects. Perfect for developer portfolios, tech demos, or creating engaging interactive experiences with a retro-tech feel.
✨ Key Features
- Real Command System: Create custom commands with text and image outputs
- Interactive Commands: Build branching dialogues with user choices
- Text Streaming Effect: Authentic terminal-style text animation
- Hidden Commands: Special "easter egg" commands not visible in help
- Command Legend: Built-in help command shows available options
- Responsive Images: Support for images in command outputs with customizable widths
- Draggable Window: Optional window dragging for desktop-like experience
💡 Pro Tips
- Use the streaming speed control for faster or slower text streaming
- Create interactive stories by chaining commands and choices
- Add hidden commands as easter eggs to reward curious users
- Combine text and images in outputs for rich experiences
- Use emojis or custom characters for the input prompt to match your brand
- Add delays between output lines for more natural conversation flow
- Customize the terminal colors to match your design system
🎨 Styling Options
- Colors: Terminal background, header, text colors, and accent colors
- Typography: Custom font family, size, and text properties
- Window: Border radius, header style, and window controls
- Layout: Text spacing, margins, and terminal dimensions
- Input: Custom prompt character and interactive elements
🛠️ Command Types
- Basic Commands: Simple text and image responses
- Interactive Commands: Multi-choice dialogues with branching outputs
- System Commands: Built-in clear and help functionality
- Hidden Commands: Secret commands for easter eggs
- Delayed Outputs: Sequential responses with customizable timing
Whether you're building a portfolio, creating an interactive story, or just want to add some tech flair to your project, this Terminal component provides a professional-grade solution that's easy to configure and customize.













Need a custom Framer component that goes beyond what's possible on the canvas? We'll create the custom code solution for you! Sky is the limit. Request a custom component here.
You may also like...
“Frequently” Asked Questions
Get answers to common questions about the Bachoff custom code Framer components.
“What are custom code Framer components?”
Custom code components are advanced elements built for Framer that enhance its default capabilities, allowing designers to implement features like 3D mockups, generators, and dynamic charts.
“Do I need coding knowledge to use custom code components?”
No coding knowledge is required! Our components are designed to be plug-and-play, but they also allow for further customization if you have coding skills.
“What types of components do you offer?”
We offer a variety of components, including 3D laptop mockups, PFP and MEME generators, charts (line, bar, pie, donut), sliders, calculators, and UI elements like cards and compare cards.
“How do I install a custom code component in Framer?”
Installation is straightforward! Usually it's just a matter of copying and pasting the code into your Framer project. You'll receive step-by-step instructions with each component, including how to integrate it into your Framer project.
“Are the components compatible with all Framer projects?”
Yes, our components are fully compatible with any Framer project. If you face any compatibility issues, our team is here to help.
“What's the difference between free, pro, and elite components?”
Free components offer basic functionality, while pro and elite components include more advanced features and customization options, catering to professional and enterprise-level needs.
“Can I request a custom-built component?”
Absolutely! We specialize in creating custom solutions tailored to your specific needs. Contact us for a quote and delivery timeline.
“Sign up” for the newsletter_
Get notifications about the latest Framer components or templates from BACHOFF Studio directly to your inbox.
“Contact”
“Policies”
©2025 BACHOFF Studio
All Rights Reserved