forked from mozdevs/servo-experiments
-
Notifications
You must be signed in to change notification settings - Fork 3
/
experiments.json
104 lines (104 loc) · 6.07 KB
/
experiments.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
{
"experiments": [
{
"name": "DIVMosaics",
"desc": "<p>Mosaic effect using DIV's</p>",
"href": "experiments/divMosaics/",
"long_description": "<p>In this experiment each mosaic tile is animated using transtions on the top and left properties.</p><p>The mosaic effect shows Servo's ability to deal with many DOM elements aswell as their transitions. The transitions in particular perform very well in Servo thanks to the hardware acceleration provided by Servo's rendering engine, WebRender.</p>"
},
{
"name": "Mosaic Gallery",
"desc": "<p>A gallery of generated DIV mosaics. ",
"href": "experiments/tiles/",
"long_description": "<p>This experiment features a gallery of generated DIV mosaics, where each pixel is represented by a static position and has transitions on their background color property. </p><p>On the page, the mosaic gallery is created by dividing the image into smaller units (pixels) represented by individual DIV elements. Each DIV element is positioned statically to form a mosaic-like grid.</p>"
},
{
"name": "DIV Rain",
"desc": "<p>Animated rain effect using DIVs.</p>",
"href": "experiments/swirly/",
"long_description": "<p>This experiment demonstrates an animated rain effect using HTML div elements. This experiment specifically focuses on testing the rendering and animation capabilities of Servo by creating a rain effect using CSS and HTML. </p><p> It provides a visually interactive demonstration of how Servo handles complex animations and effects in a web browser context.</p>"
},
{
"name": "DIV Waves",
"desc": "<p>Animated wave effect using DIVs.</p>",
"href": "experiments/divWaves/",
"long_description": "This experiment specifically focuses on testing the rendering and animation capabilities of Servo by creating a visually dynamic and colorful wave effect. The wave animation is achieved by manipulating the position, size, and color of the HTML <div> elements. </p><p> This experiment helps evaluating and showcasing its ability to handle and render complex visual effects in a performant manner."
},
{
"name": "Photo Gallery",
"desc": "<p>Photo gallery with zoom option</p>",
"href": "experiments/photo-gallery/",
"long_description": ""
},
{
"name": "Physics Particles",
"desc": "<p>Physics Particles movements.</p>",
"href": "experiments/physicsParticles/",
"long_description": ""
},
{
"name": "Iframes",
"desc": "<p>iframes Showcase</p>",
"href": "experiments/iframes/",
"long_description": "See how multiple iframes are rendered, how users can interact with the content inside them"
},
{
"name": "Cat Portal",
"desc": "<p>Test a portal-like interaction on Servo</p>",
"href": "experiments/portal/",
"long_description": ""
}
],
"tests": [
{
"name": "Dogemania Benchmark",
"desc": "<p>Benchmark your browser with Doges.</p>",
"href": "experiments/dogemania/",
"long_description": "<p>This experiment provides a visual representation of the browser's activity through the servo-logo image and measures the performance using the FPS count.</p>You can benchmark your browser with servo-doges <p></p>"
},
{
"name": "TWGL Tunnel",
"desc": "<p>Tunnel effect(TWGL). ⚠️ Trippy visuals, potential epilepsy triggers.</p>",
"href": "experiments/twgl-tunnel/",
"long_description": "<p>This experiment demonstrates the WebGL capabilities of servo. The tunnel effect is created by manipulating vertices and applying transformations to create the illusion of depth and movement. </p><p> The demo serves as a demonstration of WebGL capabilities and showcases dynamic and interactive 3D graphics using TWGL</p>"
},
{
"name": "CSS Filters",
"desc": "<p>Testing CSS filters support in Servo.</p>",
"href": "experiments/test-filters/",
"long_description": ""
},
{
"name": "CSS Transformations",
"desc": "<p>Test CSS transformations support in Servo.</p>",
"href": "experiments/test-transformations/",
"long_description": ""
},
{
"name": "WebGPU: Game of Life",
"desc": "<p>Test WebGPU support in Servo.</p>",
"href": "experiments/webgpu-game-of-life/",
"long_description": "<p>Servo needs to be run with <code>--pref dom.webgpu.enabled</code></p>"
}
],
"videos": [
{
"name": "Servo Demos",
"desc": "<p>Servo running different examples including WebGL and WebGPU.</p>",
"youtube_id": "jB5tpBzO-jg",
"long_description": "<p>In this video you can see Servo running different examples on a GNU/Linux laptop, those examples include Wikipedia, CSS animations, WebGL and WebGPU. This is a Servo build from mid-September 2023.</p>"
},
{
"name": "Servo On Raspberry Pi",
"desc": "<p>Servo running on Raspberry Pi including a comparison with Chromium.</p>",
"youtube_id": "oDqDrvxLxyI",
"long_description": "<p>In this video you can see Servo running different examples on a Raspberry Pi 400, those examples include Wikipedia, CSS animations and WebGL. This is a Servo build from mid-September 2023.</p>"
},
{
"name": "Servo Description",
"desc": "<p>Slideshow explaining what the Servo project is and its capabilities.</p>",
"youtube_id": "bRFl93QrBAk",
"long_description": "<p>In this video you can see a slideshow about Servo explaining what's the project, why you should use it, the main use cases and a bit about the project history.</p>"
}
]
}