HardWeb Design

Framer-Style Animation

Tests an AI's ability to create smooth web animations

The Prompt

Generate a landing page with smooth Framer-like transitions between sections. In a single-page self-contained HTML.

GPT-4o (Omni)Framer-Style Animation

GPT-4o (Omni)

Claude Sonnet 3.6 (2022-10-22)Framer-Style Animation

Claude Sonnet 3.6 (2022-10-22)

Claude 3.7 SonnetFramer-Style Animation

Claude 3.7 Sonnet

Claude 3.7 Thinking SonnetFramer-Style Animation

Claude 3.7 Thinking Sonnet

DeepSeek R1Framer-Style Animation

DeepSeek R1

Gemini 2.0 ProFramer-Style Animation

Gemini 2.0 Pro

Gemini 2.0 Flash ThinkingFramer-Style Animation

Gemini 2.0 Flash Thinking

o1Framer-Style Animation

o3 MiniFramer-Style Animation

o3 Mini

Grok 3Framer-Style Animation

Grok 3

Grok 3 ThinkingFramer-Style Animation

Grok 3 Thinking

GPT-4.5Framer-Style Animation

GPT-4.5