Skip to content

inbox-pulse

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

inbox-pulse

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
index.html
index.html
 
 
script.js
script.js
 
 
style.css
style.css
 
 

README.md

Inbox Pulse

An animated newsletter modal with a crumpled paper aesthetic. The popup uses SVG displacement filters, jagged clip-path polygons, and fold-line overlays to create a physical, textured feel.

Features

  • Crumpled paper modal built with SVG feTurbulence + feDisplacementMap filters
  • Jagged edges via multi-point CSS clip-path: polygon()
  • Diagonal fold-line overlays for depth
  • Smooth toggle animation with backdrop blur overlay
  • Email input with styled focus states
  • Responsive layout

Tech Used

  • HTML5
  • CSS3 (SVG Filters, Clip-path, Transitions, Fixed Positioning, Backdrop Filter)
  • JavaScript (Class toggling, Web Animations API)

How to Run

Open index.html in your browser, or launch from the Frontend Lab hub.