Evolution of 360 Search Easter Egg Development and Automated Animation Tools
The article chronicles the development of 360 Search's Easter eggs—from early on‑demand implementations to a reusable seasonal egg framework and automated animation tools using Adobe Animate, After Effects, bodymovin, and lottie‑web—highlighting how automation reduced front‑end effort and enabled interactive web animations.
We commonly refer to "Easter eggs" as hidden, fun content in movies or games, but for search engines an Easter egg is extra information displayed deliberately for specific queries, often beyond user expectations and used for expression, social responsibility, or promotion.
Initially, 360 Search created Easter eggs on demand: front‑end engineers manually implemented each effect, such as the "shattered screen" egg that broke the page into fragments when a user searched a particular term. These custom eggs required complex logic for browser compatibility, timing, closing behavior, and responsive design, leading to long development cycles and limited demand.
Since last year, the 360 Search UED team launched the "Solar Terms Egg Plan," automatically showing themed illustrations on the search results page for each of the 24 solar terms. To avoid repetitive on‑demand work, the team extracted common code into a reusable "Solar Term Egg Generator" tool, allowing simple configuration to produce egg scripts without front‑end involvement.
Building on this tool, the team created additional generators for single‑image eggs and falling‑object effects, dramatically increasing the number of eggs deployed via automation.
For animation‑rich eggs, the team explored two approaches to reduce front‑end effort. The first uses Adobe Animate (An) to export animations as browser‑executable scripts, resulting in the "An Animation Egg Auto‑Generator" tool.
The second leverages Adobe After Effects (Ae) with the bodymovin plugin to export animations as JSON files, which are rendered in browsers using the lottie‑web library. By adding state‑machine and event mechanisms, complex interactive animations can be described in JSON, controlling playback, speed, and user‑triggered actions.
The "Ae Animation Editor" creates JSON describing animation sequences and events, and the "Ae Animation Egg Auto‑Generator" embeds the resulting script into 360 Search result pages. This approach enables interval playback, state transitions, and interactive triggers without extensive front‑end coding.
Despite some limitations, these automated tools have successfully powered many animated Easter eggs, such as the 2019 Mother’s Day and Earth Day eggs, demonstrating the power of bodymovin + lottie for scalable, interactive web animations.
In summary, adopting reusable generators and animation pipelines has streamlined Easter egg development, reduced costs, and showcased a broader philosophy of automating repetitive front‑end tasks.
360 Tech Engineering
Official tech channel of 360, building the most professional technology aggregation platform for the brand.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.