Pomegranate is a HTML5 component created with Adobe Edge Animate that communicates content about the benefits of consuming pomegranates. The six base categories are fetal, heart, stomach, depression, teeth, and cancer. Each section displays it’s textual information in three steps, fading out and in with the new data. The data can easily be modified externally with a simple JSON file. The Pomegranate component also opens to reveal a inside look at the pomegranate anatomy. Also included are buttons that link to more pomegranate info on Google or Wikipedia. The graphics are created in SVG, a vector image format thats allows for razor sharp rendering at any size. The Pomegranate component is responsive, resizing itself to the height of it’s parent element. The component’s interactivity and motion graphics provide for an enjoyable educational experience. The component makes extensive use of the Greensock animation library to achieve it’s motion and interactive effects. Pomegranate was built Adobe Edge Animate and Adobe Illustrator. This project is part of my ongoing effort to create non-Flash, visually rich, gracefully interactive applications using web standards.