# WebShot Example Scripts

Collection of example puppeteer automation scripts for WebShot.

## 📜 Available Scripts

### `scroll-animation.js`
Smoothly scrolls through the entire page before capturing. Great for long-form content and revealing lazy-loaded images.

**Usage:**
```bash
webshot -u https://example.com -s ~/webshot-examples/scroll-animation.js
```

### `dark-mode.js`
Attempts to enable dark mode on the page using various common methods. Perfect for capturing dark theme versions of websites.

**Usage:**
```bash
webshot -u https://github.com -s ~/webshot-examples/dark-mode.js
```

### `interact-form.js`
Fills out and interacts with forms on the page. Useful for capturing form states with data.

**Usage:**
```bash
webshot -u https://example.com/contact -s ~/webshot-examples/interact-form.js
```

### `hover-effects.js`
Simulates hovering over interactive elements to capture hover states.

**Usage:**
```bash
webshot -u https://example.com -s ~/webshot-examples/hover-effects.js
```

### `mobile-view.js`
Sets viewport to mobile dimensions (iPhone SE). Capture mobile-responsive designs.

**Usage:**
```bash
webshot -u https://example.com -s ~/webshot-examples/mobile-view.js
```

### `animated-sections.js`
Scrolls through page sections to trigger scroll-based animations. Perfect for modern websites with scroll-triggered effects.

**Usage:**
```bash
webshot -u https://bruno-simon.com -s ~/webshot-examples/animated-sections.js
```

## 🎯 Cool Websites to Try

- **https://bruno-simon.com** - 3D portfolio with scroll interactions
- **https://threejs.org/examples** - WebGL animations
- **https://stripe.com** - Beautiful modern design
- **https://linear.app** - Sleek UI with animations
- **https://github.com** - Try with dark-mode.js

## ✨ Creating Your Own Scripts

Scripts have access to the `page` object from Puppeteer. Here's a template:

```javascript
// Your custom automation script

console.log('🚀 Starting custom automation...');

// Do something with the page
await page.evaluate(() => {
  // Manipulate DOM
  document.body.style.background = '#000';
});

// Wait for animations
await new Promise(resolve => setTimeout(resolve, 1000));

console.log('✓ Automation complete');
```

## 📚 Puppeteer API Reference

- [Page Methods](https://pptr.dev/api/puppeteer.page)
- [Browser Context](https://pptr.dev/api/puppeteer.browsercontext)
- [Element Handles](https://pptr.dev/api/puppeteer.elementhandle)

---

**WebShot** - Shoot your favorite Websites!!!