4 models have responded to the "Linear App Clone" challenge. Compare their approaches side-by-side on RIVAL. This response is part of RIVAL's open dataset of 5,600+ AI model responses.
Linear App Clone
Minimax M2 Her's response to the 'Linear App Clone' challenge.
MiniMax M2-her
January 27, 2026
Website
?Prompt
Recreate the Linear App UI using Tailwind CSS, keeping the layout and animations as close as possible. In a single-page self-contained HTML.
Response
Couldn't render this response
This model didn't return a displayable web page for this challenge.
View raw output
Here's a **self-contained HTML file** (single-page app) that mimics **Linear’s modern UI and interactions**, including the gradient background, blur effects, and neumorphic cards. It uses **pure Tailwind CSS + custom CSS** for animations and effects.
---
### 🔗 Key Features:
1. **Glassmorphism + Neumorphic Cards**
2. **Spline or Lottie (optional) animations**
3. **Animated Gradients (Hero Section)**
4. **Footer with Sparkle, Aurora, or Geometric graphics**
5. **Responsive & Dark Mode Ready**
---
### 🚀 Full HTML Code:
```html
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<title>M2 - Linear-like UI</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
<style>
:root {
--bg: #0B1120;
--primary: #6366F1;
--accent: #22D3EE;
}
html {
font-family: 'Inter', sans-serif;
}
body {
background: radial-gradient(at 70% 30%, #0A1221 0%, #111827 100%);
margin: 0;
min-height: 100vh;
color: white;
}
.glass-card {
backdrop-filter: blur(14px);
background-color: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
padding: 28px;
}
.neo-card {
box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.08),
inset -3px -3px 6px rgba(0, 0, 0, 0.4),
3px 3px 8px rgba(0, 0, 0, 0.3);
}
.gradient-text {
background: linear-gradient(to right, #6366F1, #22D3EE);
-webkit-background-clip: text;
color: transparent;
}
/* Hero Gradient */
.hero-gradient {
background: radial-gradient(ellipse at center, #1f2937 0%, #0B1120 100%);
}
@keyframes gradient-move {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.animated-gradient {
animation: gradient-move 10s linear infinite;
background-size: 200% 200%;
}
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fade-up {
animation: fadeUp 0.7s ease-out forwards;
}
/* Marquee */
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-content {
animation: marquee 15s linear infinite;
}
</style>
</head>
<body class="overflow-x-hidden text-gray-100">
<!-- HEADER -->
<header class="sticky top-0 z-10 bg-[#0B1120]/70 backdrop-blur-sm py-4">
<nav class="container mx-auto flex justify-between items-center px-4">
<div class="text-xl font-semibold gradient-text">M2</div>
<div class="hidden md:flex items-center space-x-4">
<a href="#features" class="hover:text-gray-300 transition">Features</a>
<a href="#testimonials" class="hover:text-gray-300 transition">Testimonials</a>
<a href="#pricing" class="hover:text-gray-300 transition">Pricing</a>
<a href="#faq" class="hover:text-gray-300 transition">FAQ</a>
<button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg transition">Sign Up</button>
</div>
<!-- Mobile Menu -->
<div class="md:hidden">
<button id="menu-button" class="text-gray-300 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</nav>
<div id="mobile-menu" class="md:hidden hidden bg-[#0B1120] px-4 pt-2 pb-4">
<a href="#features" class="block hover:text-gray-300">Features</a>
<a href="#testimonials" class="block hover:text-gray-300">Testimonials</a>
<a href="#pricing" class="block hover:text-gray-300">Pricing</a>
<a href="#faq" class="block hover:text-gray-300">FAQ</a>
</div>
</header>
<!-- HERO SECTION -->
<section class="hero-gradient px-4 pt-16 pb-24 text-center animated-gradient">
<h1 class="text-4xl md:text-5xl font-bold fade-up leading-tight">
Build Your Ideas <span class="gradient-text">Faster.</span>
</h1>
<p class="mt-6 text-lg text-gray-300 max-w-2xl mx-auto fade-up">
A next-gen platform with a Linear-like interface. Drag & drop, collaborate, and ship products at light speed with our open-source framework.
</p>
<div class="mt-8 fade-up">
<button class="bg-indigo-500 hover:bg-indigo-600 px-6 py-3 rounded-lg text-white transition">Get Started</button>
<button class="ml-4 border border-indigo-500 text-indigo-500 hover:bg-indigo-500/10 px-6 py-3 rounded-lg transition">Learn More</button>
</div>
</section>
<!-- FEATURES SECTION -->
<section id="features" class="container mx-auto px-4 mt-16 md:mt-24 py-8">
<h2 class="text-3xl font-semibold text-center mb-8 gradient-text">Features</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="glass-card fade-up">
<div class="w-12 h-12 bg-indigo-500 rounded-lg flex items-center justify-center mb-4">
<span class="text-xl font-bold">⚡</span>
</div>
<h3 class="text-xl font-semibold mb-2">Instant Deployments</h3>
<p class="text-gray-300">Push to deploy with Git. Your project is live in seconds, not minutes.</p>
</div>
<div class="glass-card fade-up delay-[200ms]">
<div class="w-12 h-12 bg-teal-500 rounded-lg flex items-center justify-center mb-4">
<span class="text-xl font-bold">🌐</span>
</div>
<h3 class="text-xl font-semibold mb-2">Global CDN</h3>
<p class="text-gray-300">Low-latency performance worldwide thanks to a network of fast, distributed servers.</p>
</div>
<div class="glass-card fade-up delay-[400ms]">
<div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4">
<span class="text-xl font-bold">🔐</span>
</div>
<h3 class="text-xl font-semibold mb-2">SSL for All</h3>
<p class="text-gray-300">Automatic SSL certificates ensure your project is secure and trusted by default.</p>
</div>
</div>
</section>
<!-- TESTIMONIALS MARQUEE -->
<section id="testimonials" class="mt-24 py-12 bg-gray-900/60 overflow-hidden">
<h2 class="text-3xl font-semibold text-center gradient-text mb-8">What Our Users Say</h2>
<div class="relative w-full h-40 flex items-center">
<div class="marquee-content absolute whitespace-nowrap">
<div class="glass-card inline-block mx-4 p-6 min-w-[300px]">
<div class="Linear App Clone
About MiniMax M2-her
Capabilities
ConversationReasoning
Categories
Text
Specifications
- Provider
- Minimax
- Released
- 2026-01-27
- Size
- LARGE
- Context
- 65,536 tokens
