UI Code Challenge #1 - Heartbeats

SitePoint initiated a four-week UI code challenge. The first challenge was "Heartbeat", requiring participants to create a UI animation similar to movies, TVs and game center jumps. Entries must be submitted in CodePen form and can be used with any web technology.

The selection criteria include code simplicity, effectiveness, authenticity of the appearance and feel of the UI, as well as the cleverness and creativity of the solution. First prize won $100 Amazon gift card, runner-up won 2 premium memberships and SitePoint T-shirts.

Challenges provide FAQs covering custom heartbeat animations, applying them to other shapes, adding to the website, troubleshooting, enhancing realism, changing colors, adding sounds, and using commercial projects, and providing CSS animation learning resources. .

We often see stunning UI interfaces in movies, TVs and games, while UI designs at work often appear boring. This challenge gives you the opportunity to create interesting works and win $100 Amazon Gift Card!

Clockwise from the upper left corner: Luke Cage (Season 1, Episode 10), The Hut in the Forest (2012), The Lost War (2013), and Casino Royale (2006) .

The challenge task is to create an animated ECG/EKG biomonitoring display panel. Any technology can be used as long as it can be presented in CodePen form, including HTML/CSS, Canvas, SVG, WebGL, D3, etc.

Usually, these UI interfaces use dark mode, including at least one left and right curve chart, depicting the heartbeat rate. Other elements can be added (core temperature, blood pressure, etc.), but the core is a undulating heartbeat curve.

Enterprise method: Post CodePen link and short description in the comment section. A creative can submit multiple works, but it is recommended to avoid submitting multiple similar works.

Selecting criteria: code simplicity and effectiveness; authenticity of UI appearance and feeling; creativity.

Judgement Time: The Challenge starts on Wednesday, June 5 at 9:00 am (PST) and ends a week later (9:00 am on Wednesday, June 12 at 9:00 am PST).

FAQs cover custom heartbeat animations, application to other shapes, adding to websites, troubleshooting, enhancing realism, changing colors, adding sounds, and using commercial projects, and provide CSS animation learning resource.

The above is the detailed content of UI Code Challenge #1 - Heartbeats. For more information, please follow other related articles on the PHP Chinese website!