patrick-s-young / box-kite

Make Floating Boxes with CSS 3D Transforms

BoxKite

Make Floating Boxes with CSS 3D Transforms

BoxKite renders WebGL-like 3D cuboids using CSS 3D Transforms. Since the 3D object is CSS, it can interact more seamlessly with any background HTML elements. For instance, imagine a BoxKite ad unit that starts in the corner of the page and expands to the center when clicked.

Running Locally

Make sure you have Node.js installed.

git clone https://github.com/patrick-s-young/BoxKite.git # or clone your own fork
cd box-kite
npm install
npm start

Features

Explode View Zoom In/Out Prev/Next Gallery

Built With

• React - JavaScript UI library.
• react-spring - JavaScript spring-physics based animation library.
• webpack - Static module builder.

Authors

• Patrick Young - Patrick Young
• Adam Stover - Adam Stover

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Thanks to @citrusvanilla and @jacobbanks for the initial inspiration.