Relayer | Plank Designs

A Premium AI Agent & Automation Template Built in Framer

Product: Relayer (AI Automation Platform)

Platform: Framer

Role: UI/UX Design & Framer Development

Timeline: 1 Week

Tags: AI, Agents, SaaS, Framer, Dark Mode, Automation

The Challenge: Visualizing the Invisible

In the rapidly evolving AI sector, many companies struggle to explain what "AI Agents" actually do. The technical nature of autonomous workflows often results in websites that are either too abstract or overly cluttered with code snippets, alienating potential business clients.

Relayer approached us with a specific challenge: create a landing page that makes sophisticated automation feel accessible and powerful. They needed a design that could:

Define a New Category: Position "AI Teams" as a tangible, manageable asset for businesses.
Establish Dark-Mode Authority: Utilize a high-contrast, "cyber-premium" aesthetic that resonates with the tech-forward AI community.
Simplify Onboarding: Transition users from curiosity about AI to signing up for a waitlist or trial with zero friction.

The goal was to build a digital home for the future of work—one that feels both autonomous and under control.

The Solution: A High-Octane, Modern Automation Hub

We utilized Framer to create a site that feels alive. By pairing a deep, obsidian background with energetic red accents, we created a visual metaphor for the "power" running behind the Relayer platform.

A Visual Identity Rooted in Energy & Precision

We moved away from the standard "AI blue" and opted for a bold, monochromatic dark theme accented by red light-trails. Using Framer’s effects, we implemented a background of glowing particles and flowing lines to represent data moving through a "Relay" system. This creates an immersive experience that feels cutting-edge and high-speed.

Strategic Layouts for Agent-Based Workflows

Since Relayer focuses on building teams of agents, the layout had to emphasize scalability.

The Hero Section: A bold, centered value proposition: "Build a Team of AI Agents That Works for You," supported by a dual-CTA approach (Start for Free vs. Access Waitlist).
The "Social Trust" Engine: A monochrome logo marquee featuring industry leaders, grounding the futuristic tech in real-world credibility.
Dynamic Pricing: A tiered pricing structure (Starter, Pro, Enterprise) designed with clear feature check-lists, making it easy for users to identify their scale—from 3 agents to unlimited.

Conversion-First Architecture

The site is built to capture intent at every scroll depth.

Interactive Forms: A streamlined "Contact Us" section with contextual dropdowns ("What are you hoping to automate?") to pre-qualify leads before they even hit "Submit."
Clean Navigation: A minimalist header that keeps the focus on "Pricing" and "Waitlist," ensuring the primary conversion goals are always visible.
Feature Modularity: "How it Works" sections that break down complex agent deployment into digestible, three-step processes.

The Framer Build: Performance Meets Motion

The Relayer template leverages Framer’s most powerful features to ensure the site isn't just a static page, but a high-performance marketing tool.

Advanced Motion Effects: We used scroll-triggered animations to "reveal" content as the user explores, mimicking the feeling of an AI system waking up.
Component-Based Pricing: The pricing table is built as a flexible component, allowing for easy switching between monthly and yearly billing cycles.
Responsive Fluidity: The complex grid layouts and background particles were optimized for mobile, ensuring the "Relayer" brand impact remains consistent on a 6-inch screen as it does on a 32-inch monitor.

The Results: Turning Complexity into Conversions

With the launch of the Relayer template, the brand now has a digital storefront that matches the sophistication of its underlying technology. The template provides:

Instant Market Authority: The "Dark UI" aesthetic immediately categorizes Relayer as a high-end, modern tech solution.
Streamlined Lead Gen: The integrated contact and waitlist forms have turned passive traffic into a structured pipeline of qualified leads.
Scalable Content: The modular "How it Works" and "Feature" blocks allow the team to add new agent capabilities to the site in minutes.

"Relayer isn't just a website; it’s an experience. The design captures exactly what we do—fast, powerful, and intelligent automation. Our users are impressed before they even see the product dashboard." — Lead Design Engineer

Why This Template Works

The Relayer template is the ultimate foundation for any startup operating in the AI, LLM, or Automation space.

For the Designer: A striking, high-contrast aesthetic that stands out in a crowded market.
For the Developer: A clean Framer architecture that is effortless to customize and deploy.
For the Business Owner: A layout focused on building a waitlist and explaining complex tech simply.

Deploy your AI brand with Relayer and start building the future of autonomous work.

View Live Demo | Purchase Template