Apply Torn Edge and Grunge Paper Effects To Elements – TornPaper.js

Preview:

Description:

TornPaper is a lightweight JavaScript library that gives your design a vintage or distressed look by applying torn edge and grunge paper effects to elements.

It’s perfect for portfolios, artistic blogs, or any site aiming to break away from the sleek, clean lines typical in digital design.

How to use it:

1. Download the package and link to the tornpaper.min.js in your document.

<script src="tornpaper.js"></script>

2. Initiate a new TornPaper instance in your JavaScript.

new Tornpaper({
    // options here
});

3. Apply the filter to any element to see the effect take shape.

<div class="demo">
...
</div>

.demo {
  /* required */
  filter: url(#filter_tornpaper);
  /* optional background */
  background-color: red;
  background: linear-gradient(to bottom, oldlace, peachpuff);
  background: url("bg.jpg") center/cover;
  
}

4. You can customize the torn paper effect by adjusting options like the filter ID, random seed, torn edge frequency, and grunge texture frequency.

new Tornpaper({
    filterName : "filter_tornpaper", 
    seed: 1,
    tornFrequency: 0.05, 
    tornScale: 10,
    grungeFrequency: 0.03,
    grungeScale: 3
});