https://github.com/georgewpark/3d-paper-shredder

This project combines the power of 3D CSS, background-clip, and a touch of JS to create a functional 3D paper shredder. Type to edit the text on the paper then press the green button to shred your text.
https://github.com/georgewpark/3d-paper-shredder

3d css text-effects

Last synced: 3 months ago
JSON representation

This project combines the power of 3D CSS, background-clip, and a touch of JS to create a functional 3D paper shredder. Type to edit the text on the paper then press the green button to shred your text.

• Host: GitHub
• URL: https://github.com/georgewpark/3d-paper-shredder
• Owner: georgewpark
• License: mit
• Created: 2022-10-05T10:10:21.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-10-05T15:34:38.000Z (over 2 years ago)
• Last Synced: 2025-01-15T11:12:32.690Z (4 months ago)
• Topics: 3d, css, text-effects
• Language: SCSS
• Homepage: https://cdpn.io/QWrxPyJ
• Size: 666 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

        
# 3D Paper Shredder

This project combines the power of 3D CSS, background-clip, and a touch of JS to create a functional 3D paper shredder. Type to edit the text on the paper then press the green button to shred your text.

![3D Paper Shredder Demo](demo-gif.gif "3D Paper Shredder Demo")

## Live Demo

A live demo is available on [CodePen](https://codepen.io/GeorgePark/full/QWrxPyJ) and [Netlify](https://3d-paper-shredder.netlify.app/).

## License

This project is licensed under the MIT License - see the [license.md](license.md) file for details.

## Project Setup

From the root directory, install project dependencies by running `npm install` from the terminal.

Build the files and start the local dev server by running `npm run dev` from the terminal. This should open the dev site automatically at http://localhost:3000/.

You can build the files without starting the dev server by running `npm run build` from the terminal to compile the development build or `npm run prod` to compile the production build.