Web Animation Examples Gallery
Browse featured web animation examples
Featured Picks
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>科技感赛车男孩 - 动效驱动</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #020617;
font-family: 'Courier New', Courier, monospace, 'No
A little boy is driving a car
2.4K
Playback pauses when you leave
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>科技感跑者 - 动效驱动视差叙事</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #F0FDF4; /* 背景要求 */
font-family: 'Inter', 'Noto Sans SC',
A boy running in the park
2.4K
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
export default function SilkRoadSearchAnimation() {
const [phase, setPhase] = useState('typing'); // typing, moving, loading, results, scrolling
const [typedText, setTypedText] = useState("");
const [mousePos, setMousePos] = useState({ x: 800, y: 500 });
const [isClick
The main subject of the screen is a minimalist modern search engine interface with a soft off-white background.
2.3K
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import * as Lucide from 'lucide-react';
/**
* Modern Search UI Animation
* Features: Material Design, Glassmorphism, Realistic Typing, Smooth Transitions
*/
const WIDTH = 1200;
const HEIGHT = 700;
const SUGGESTIONS = [
"丝绸之路纪录片运镜技巧",
"西北大漠摄影构图指南",
"丝绸之路最佳拍摄季节与光影",
"古丝绸之路人文风情抓拍"
];
const COLORS = {
bg: '#F9F9F7',
searchBox: '#FFFFFF',
te
A minimalist modern style UI search component is presented in the center of the screen, using Materi
2.3K
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Calculator, RefreshCcw, Play, Pause } from 'lucide-react';
const WIDTH = 1200;
const HEIGHT = 700;
// 动画阶段定义
const PHASES = {
INTRO: 0, // 初始状态：展示头
ASSUME: 1, // 假设阶段：全部长出2条腿
CALC_DIFF: 2, // 计算差异：展示当前脚数量与实际数量的差
DISTRIBUTE: 3, // 分配补足：多余的脚飞向兔子
REVEAL: 4, // 揭晓结果：变色区分鸡和兔
};
// 问题参数
const TOTAL_HEADS = 8;
const TOTAL_FEET = 26;
// 计算结果: 兔子 = (26 - 8*2) / 2 = 5, 鸡 = 3
// 缓动函数
Problem-solving approach for the Chicken and Rabbit in the Same Cage problem
2.2K
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { motion } from 'framer-motion';
import { MapPin, Wind, Scroll, RefreshCw, Play, Pause } from 'lucide-react';
// --- 配置常量 ---
const WIDTH = 1200;
const HEIGHT = 700;
const ANIMATION_DURATION = 25000; // 总时长 ms
const BACKGROUND_COLOR = '#0f172a';
const ACCENT_COLOR = '#38bdf8'; // Sky blue
const GOLD_COLOR = '#facc15';
const TEXT_COLOR = '#e2e8f0';
// --- 李白生平轨迹关键节点数据 ---
const LOCATIONS = [
{ id: 1, yea
Create an animation of Li Bai's life journey, preferably marking the time and
2.3K
Playback pauses when you leave
```javascript
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const WIDTH = 1200;
const HEIGHT = 700;
const BACKGROUND_COLOR = '#0f172a';
const SERVER_BASE_COLOR = '#1e293b';
const ACCENT_CYAN = '#06b6d4';
const ACCENT_GREEN = '#10b981';
const ACCENT_GOLD = '#f59e0b';
const
Create an isometric SVG animation scene,
2.2K
Playback pauses when you leave
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
const WIDTH = 1200;
const HEIGHT = 700;
const COURT_START_X = 400;
const COURT_WIDTH = 750;
const GROUND_Y = 550;
const NET_X = COURT_START_X + COURT_WIDTH / 2;
const NET_HEIGHT = 80;
// Grip Data Configuration
const GRIPS = [
{
id: 'continental',
name: '大陆式 (Continental)',
desc: '锤子握法，适合发球、截击、切削。',
bevel: 2, // Bevel 2
speed: 90,
spin: 20,
trajectory: 'flat',
color: '#38bdf8', /
Tennis: Differences between Continental, Eastern, Semi-Western, and Western grips and ball speed characteristics
2.3K
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
// ----------------------------------------------------------------------
// CONFIGURATION & CONSTANTS
// ----------------------------------------------------------------------
const WIDTH = 1600;
const HEIGHT = 900;
const CENTER_X = WIDTH / 2;
const CENTER_Y = HEIGHT / 2;
// Colors
const C_LEFT_BG = '#E5E7EB';
const C_LEFT_FG = '#374151'; // Dark gray for lines/text
const C_LEFT_ACCE
The SVG canvas size is set to 16:9, divided in the middle by a semi-transparent dashed line. The left half
2.2K
Playback pauses when you leave
```javascript
'use client';
import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { Zap, Activity, Battery, Anchor, Search, Cpu, Wifi, AlertTriangle } from 'lucide-react';
// ----------------------------------------------------------------------
// Constants & Config
// ----------------------------------------------------------------------
const VIEW_WIDTH = 1200;
const VIEW_HEIGHT = 700;
const BG_COLOR = "#0f172a";
const ACCENT_COLOR = "#3b82f6";
const SENSO
Principle: High-sensitivity rubidium atom sensors based on atomic spin polarization and magnetic resonance principles
2.1K
Playback pauses when you leave
'use client';
import React, { useState, useEffect, useRef, useMemo } from 'react';
// -----------------------------------------------------------------------------
// Constants & Configuration
// -----------------------------------------------------------------------------
const WIDTH = 1000;
const HEIGHT = 600;
const BACKGROUND_COLOR = '#0f172a';
const PRIMARY_COLOR = '#06b6d4'; // Cyan
const SECONDARY_COLOR = '#8b5cf6'; // Violet
const ACCENT_COLOR = '#f43f5e'; // Rose
const TEXT_COLOR = '#e
Animation of ion trap detecting gases and liquids
2.2K