Skip to content

L1 performance fact sheet draft version #2600

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions app/(home)/l1-performance/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
'use client';

import { useState, useEffect } from 'react';
import {
AnimatedBackground,
HeroSection,
MetricsSection,
HorizontalScrollSection,
FAQSection,
CTASection
} from '@/components/l1-performance';

export default function L1PerformancePage() {
const [isInSlider, setIsInSlider] = useState(false);

// Initialize custom animations
useEffect(() => {
addCustomAnimations();
}, []);

return (
<div className="min-h-screen bg-background text-foreground">
<AnimatedBackground />
<main className="relative">
<HeroSection />
<MetricsSection />
<HorizontalScrollSection isInSlider={isInSlider} setIsInSlider={setIsInSlider} />
<FAQSection />
<CTASection />
</main>
</div>
);
}

// Add custom animations to global CSS
const addCustomAnimations = () => {
if (typeof document !== 'undefined') {
const style = document.createElement('style');
style.textContent = `
@keyframes circuit-vertical {
0% { transform: translateY(-100%); opacity: 0; }
50% { opacity: 0.5; }
100% { transform: translateY(100%); opacity: 0; }
}

@keyframes wave {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}

.animate-circuit-vertical {
animation: circuit-vertical 8s linear infinite;
}

.animate-wave {
animation: wave 8s ease-in-out infinite;
}
`;
document.head.appendChild(style);
}
};
31 changes: 31 additions & 0 deletions components/charts/L1TPSChart.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
"use client";

import { ChartContainer } from '@/components/ui/chart';
import {
ResponsiveContainer,
LineChart,
Line,
XAxis,
YAxis,
Tooltip as RechartsTooltip,
} from "recharts";

export default function L1TPSChart({ data }: { data: any[] }) {
return (
<ChartContainer
config={{ tps: { color: '#FF4747', label: 'TPS' } }}
className="h-32 w-full"
>
<div className="w-full h-full">
<ResponsiveContainer width="100%" height="100%">
<LineChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
<XAxis dataKey="name" axisLine={false} tickLine={false} stroke="#888" />
<YAxis axisLine={false} tickLine={false} stroke="#888" />
<RechartsTooltip />
<Line type="monotone" dataKey="tps" stroke="#FF4747" strokeWidth={2} dot={false} />
</LineChart>
</ResponsiveContainer>
</div>
</ChartContainer>
);
}
50 changes: 50 additions & 0 deletions components/l1-performance/AnimatedBackground.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// Animated Background Components
export const AnimatedBackground = () => (
<div className="fixed inset-0 overflow-hidden pointer-events-none">
{/* Gradient Orbs */}
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-[#EB4C50]/20 to-orange-500/20 rounded-full blur-3xl animate-pulse" style={{animationDuration: '8s'}} />
<div className="absolute top-3/4 right-1/4 w-80 h-80 bg-gradient-to-r from-blue-500/15 to-purple-500/15 rounded-full blur-3xl animate-pulse" style={{animationDuration: '12s', animationDelay: '2s'}} />
<div className="absolute bottom-1/4 left-1/3 w-64 h-64 bg-gradient-to-r from-emerald-500/10 to-cyan-500/10 rounded-full blur-3xl animate-pulse" style={{animationDuration: '10s', animationDelay: '4s'}} />

{/* Additional Gradient Orbs */}
<div className="absolute top-1/6 right-1/6 w-72 h-72 bg-gradient-to-r from-purple-500/15 to-pink-500/15 rounded-full blur-3xl animate-pulse" style={{animationDuration: '9s', animationDelay: '1s'}} />
<div className="absolute top-2/3 left-1/6 w-56 h-56 bg-gradient-to-r from-cyan-500/12 to-blue-500/12 rounded-full blur-3xl animate-pulse" style={{animationDuration: '11s', animationDelay: '3s'}} />
<div className="absolute bottom-1/3 right-1/3 w-88 h-88 bg-gradient-to-r from-orange-500/10 to-yellow-500/10 rounded-full blur-3xl animate-pulse" style={{animationDuration: '7s', animationDelay: '5s'}} />
<div className="absolute top-1/2 left-1/2 w-48 h-48 bg-gradient-to-r from-green-500/8 to-emerald-500/8 rounded-full blur-3xl animate-pulse" style={{animationDuration: '13s', animationDelay: '0.5s'}} />
<div className="absolute bottom-1/6 left-1/4 w-64 h-64 bg-gradient-to-r from-indigo-500/12 to-purple-500/12 rounded-full blur-3xl animate-pulse" style={{animationDuration: '10.5s', animationDelay: '2.5s'}} />
<div className="absolute top-1/3 right-1/2 w-40 h-40 bg-gradient-to-r from-red-500/10 to-orange-500/10 rounded-full blur-3xl animate-pulse" style={{animationDuration: '8.5s', animationDelay: '4.5s'}} />

{/* Network Grid Lines */}
<div className="absolute inset-0 opacity-5">
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="network-grid" width="100" height="100" patternUnits="userSpaceOnUse">
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.3"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#network-grid)" />
</svg>
</div>

{/* Animated Circuit Lines */}
<div className="absolute inset-0">
{/* Vertical Circuit Lines */}
{[...Array(6)].map((_, i) => (
<div
key={`circuit-v-${i}`}
className="absolute w-px bg-gradient-to-b from-transparent via-[#EB4C50]/20 to-transparent animate-circuit-vertical"
style={{
left: `${15 + i * 15}%`,
top: '0%',
height: '100%',
animationDelay: `${i * 0.7}s`,
animationDuration: '8s'
}}
/>
))}
</div>

{/* Subtle Wave Effect */}
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#EB4C50]/5 to-transparent animate-wave" style={{animationDuration: '8s'}} />
</div>
);
30 changes: 30 additions & 0 deletions components/l1-performance/CTASection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Link from 'next/link';

export const CTASection = () => (
<section className="relative py-24 px-4">
<div className="absolute inset-0 bg-gradient-to-r from-[#EB4C50]/5 to-orange-500/5 rounded-3xl backdrop-blur-sm " />
<div className="relative px-8 py-16 text-center space-y-6 rounded-3xl max-w-4xl mx-auto">
<h2 className="text-3xl md:text-5xl font-bold">Ready to Build Your L1?</h2>
<p className="text-lg text-muted-foreground max-w-3xl mx-auto">
Start building your high-performance L1 blockchain with Avalanche's battle-tested infrastructure and tooling.
</p>

<div className="flex gap-4 justify-center mb-16">
<Link
href="/docs"
className="bg-black hover:bg-black/75 dark:bg-white dark:hover:bg-white/75 text-white dark:text-black px-4 py-2 rounded-lg text-sm font-semibold transition-colors dark:bg-opacity-90"
>
Get Started
</Link>
<a
href="https://github.com/ava-labs/builderkit"
className="bg-white dark:bg-black border border-[0.5] border-black/25 dark:border-white/25 dark:hover:border-white/50 hover:border-black/50 dark:text-white px-4 py-2 rounded-lg text-sm font-semibold transition-colors"
target="_blank"
rel="noopener noreferrer"
>
GitHub
</a>
</div>
</div>
</section>
);
107 changes: 107 additions & 0 deletions components/l1-performance/EconomicsSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import {
CheckCircle,
Coins,
Shield,
Settings,
Target,
Users,
Flame
} from 'lucide-react';

export const EconomicsSection = () => (
<div className="space-y-8">
{/* Economic Model Overview */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div className="text-center p-6 bg-background/50 rounded-2xl border border-border/50">
<Coins className="w-8 h-8 text-foreground mx-auto mb-3" />
<div className="text-lg font-semibold mb-1">Gas Token</div>
<div className="text-sm text-muted-foreground">Custom ERC-20</div>
</div>
<div className="text-center p-6 bg-background/50 rounded-2xl border border-border/50">
<Shield className="w-8 h-8 text-foreground mx-auto mb-3" />
<div className="text-lg font-semibold mb-1">Staking Token</div>
<div className="text-sm text-muted-foreground">Validator Control</div>
</div>
<div className="text-center p-6 bg-background/50 rounded-2xl border border-border/50">
<Settings className="w-8 h-8 text-foreground mx-auto mb-3" />
<div className="text-lg font-semibold mb-1">Fee Models</div>
<div className="text-sm text-muted-foreground">Flexible Options</div>
</div>
</div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<Card className="border border-border/50 bg-card/50">
<CardHeader>
<CardTitle className="flex items-center gap-3 text-xl">
<Coins className="w-5 h-5 text-[#EB4C50]" />
Gas Token
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-3">
{[
'Support for custom gas token',
'Can be stablecoin or any ERC-20 token',
'Can be shared across multiple L1s'
].map((feature, idx) => (
<div key={idx} className="flex items-center gap-3 p-3 bg-background/50 rounded-lg border border-border/50">
<CheckCircle className="w-4 h-4 text-emerald-500" />
<span className="text-sm">{feature}</span>
</div>
))}
</div>
</CardContent>
</Card>

<Card className="border border-border/50 bg-card/50">
<CardHeader>
<CardTitle className="flex items-center gap-3 text-xl">
<Shield className="w-5 h-5 text-[#EB4C50]" />
Staking Token
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-3">
{[
'Can be same as gas/native token or separate',
'Full control over validator set determination',
'Custom implementations like node licenses'
].map((feature, idx) => (
<div key={idx} className="flex items-center gap-3 p-3 bg-background/50 rounded-lg border border-border/50">
<CheckCircle className="w-4 h-4 text-emerald-500" />
<span className="text-sm">{feature}</span>
</div>
))}
</div>
</CardContent>
</Card>
</div>

<Card className="border border-border/50 bg-card/50">
<CardHeader>
<CardTitle className="text-xl">Transaction Fee Models</CardTitle>
<CardDescription>
Flexible fee distribution and reward mechanisms
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{[
{ title: 'Reward Address', desc: 'Set specific address to receive all transaction fees from blocks', icon: Target },
{ title: 'Fee Recipients', desc: 'Allow block producers to claim fees with their own addresses', icon: Users },
{ title: 'Burn All Fees', desc: 'Dynamically switch to burning all collected transaction fees', icon: Flame }
].map((model, idx) => (
<div key={idx} className="p-4 border border-border/50 rounded-lg bg-background/50">
<div className="flex items-center gap-2 mb-2">
<model.icon className="w-4 h-4 text-muted-foreground" />
<h4 className="font-medium text-sm">{model.title}</h4>
</div>
<p className="text-xs text-muted-foreground">{model.desc}</p>
</div>
))}
</div>
</CardContent>
</Card>
</div>
);
83 changes: 83 additions & 0 deletions components/l1-performance/FAQSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
import {
Shield,
Users,
Zap,
Activity,
ArrowRight,
Globe
} from 'lucide-react';

const faqData = [
{
q: 'What types of validation models are available?',
a: 'Avalanche supports flexible validator set management with audited reference implementations for both permissioned (Proof-of-Authority) and permissionless (Proof-of-Stake with optional delegation) models. These implementations are fully customizable to meet specific requirements.',
icon: Shield
},
{
q: 'How many validators can there be in a permissioned chain?',
a: 'Avalanche L1 chains utilize the same consensus mechanism as the public Primary Network, which has been running with over 1,000 validators. The architecture supports significantly higher theoretical maximums, constrained mainly by network latency and hardware.',
icon: Users
},
{
q: 'Can the chain be gasless?',
a: 'Yes. Avalanche L1s can support gasless transactions through several mechanisms, including using a valueless token for gas or completely abstracting gas via relayers that sponsor transaction fees on behalf of users.',
icon: Zap
},
{
q: 'What is the expected TPS, and is it affected by the number of validators?',
a: 'EVM L1 performance depends on multiple factors: state size, transaction type, validator count, and network latency. With a small (~10), co-located validator set and an in-memory state (<100GB), throughput can reach up to 8,400 TPS, equivalent to ~175 million gas/second (for simple transfers). With ~30 globally distributed validators, performance is around 4,000 TPS, or ~85 million gas/second—assuming the state fits in memory.',
icon: Activity
},
{
q: 'How does the migration from PoA to PoS work?',
a: 'It is easy to migrate from PoA to PoS. The ownership of the validator manager contract is transferred to a staking manager. The ERC20 or native token Staking Manager contracts are deployed separately and are made the owner of the PoA Validator Manager contract.',
icon: ArrowRight
},
{
q: 'How does interoperability work without trusted third-parties?',
a: 'Avalanche L1s provide native interoperability without trusted third-parties. The system uses a flat interoperability fee per validator with no sequencer revenue share, settlement fees, DA costs or message-based interoperability fees. This enables fast cross-chain communication with 2 block confirmations (3s end-to-end).',
icon: Globe
}
];

export const FAQSection = () => (
<section className="space-y-8 py-24 px-4">
<div className="text-center space-y-4">
<h2 className="text-4xl font-bold mb-6">Frequently Asked Questions</h2>
<p className="text-md text-muted-foreground mb-8">
Common questions about L1 performance and capabilities
</p>
</div>

<div className="max-w-4xl mx-auto">
<div className="space-y-4">
{faqData.map((faq, idx) => (
<Accordion key={idx} type="single" collapsible className="w-full">
<AccordionItem value={`item-${idx}`} className="border border-border/30 bg-background/50 backdrop-blur-sm rounded-xl overflow-hidden hover:bg-background/70 transition-colors duration-200">
<AccordionTrigger className="px-6 py-5 hover:no-underline group cursor-pointer">
<div className="flex items-center gap-4 w-full">
<div className="flex-shrink-0">
<div className="p-2 rounded-lg bg-background/60 border border-border/40 group-hover:bg-background/80 transition-colors duration-200">
<faq.icon className="w-4 h-4 text-muted-foreground group-hover:text-[#EB4C50] transition-colors duration-200" />
</div>
</div>
<span className="font-semibold text-lg text-foreground group-hover:text-[#EB4C50] transition-colors duration-200 text-left flex-1">
{faq.q}
</span>
</div>
</AccordionTrigger>
<AccordionContent className="px-6 pb-5">
<div className="pl-14">
<p className="text-muted-foreground leading-relaxed text-base">
{faq.a}
</p>
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
))}
</div>
</div>
</section>
);
19 changes: 19 additions & 0 deletions components/l1-performance/HeroSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { AvalancheLogo } from '@/components/navigation/avalanche-logo';

export const HeroSection = () => (
<section className="text-center space-y-6 pt-12 pb-24">
<div className="flex justify-center mb-6">
<AvalancheLogo className="w-16 h-16 text-[#EB4C50]" />
</div>
<h1 className="text-4xl md:text-7xl font-bold tracking-tighter">
L1 Performance
<span className="block pb-1 text-[#EB4C50]">
Fact Sheet
</span>
</h1>
<p className="text-lg text-foreground mb-12 max-w-3xl mx-auto">
Discover the cutting-edge performance metrics and capabilities of our L1 blockchain solution,
designed for maximum throughput, minimal latency, and seamless interoperability.
</p>
</section>
);
Loading