Agent skill · Audited from source

scroll-reveal-libraries

skill · freshtechbro/claudedesignskillsMIT licenceAudited 31 Oct 2026 · source 2b2fd871ca33

★ 1,200pushed 345 days ago

✓SAFEGrade B · 89/100 · 31 Oct 2026 · 2b2fd87

1,200repo stars · whole freshtechbro/claudedesignskills

Is it safe? Yes — SAFE, grade B (89/100). We read this skill's source at commit 2b2fd871ca33 and found no filesystem, network or shell access and no hard-coded secrets. What it does: Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide effects without complex animation…

Ask an AI about this pageGChatGPT CClaude PPerplexity GeGemini XGrok

CoCopilot AIGoogle AI Mode

Cite

Cite this page

ModelsAtlas. “scroll-reveal-libraries (freshtechbro/claudedesignskills)”. Retrieved 31 Oct 2026. https://modelsatlas.com/skills/freshtechbro/scroll-reveal-libraries

Trust audit

Audit 0.4.1 · source read 31 Oct 2026

Trust score89/100✓SAFE B

0 critical0 high0 medium0 low0 info

SAFE means nothing in the source contradicts what the skill says it does. Grade B is shared by 16,667 of 17,602 audited skills.

What the source does

FilesystemNone observedNo reads or writes in the source
NetworkNone observedNo outbound calls in the source
ShellNone observedNo commands run in the source
DependenciesPinnedNothing floats
SecretsNone foundNo keys in source

Five audit layers

Layer	What we check	Result
`L0` Provenance	Repo owner, licence, archive status, activity	PASS
`L1` Static source	Secrets, path traversal, supply chain, hidden code	PASS
`L2` Instructions	Prompt injection, authority framing, hidden directives	PASS
`L3` Inventory	The files and declarations match the source	PASS
`L4` Sandbox	Run in isolation and watch behaviour	SKIPPED why

Gates applied: no behavioural pass.

Findings (0)

No findings at any severity. We re-audit when the source changes.

Audit 0.4.1 · source sha 2b2fd871ca33 · 31 Oct 2026Report an issue or request a re-scan

Provenance

Who published it, and what the verdict is pinned to

Publisherfreshtechbro GitHub userOwner of the repository this skill is read from
Source folderfreshtechbro/claudedesignskills/.claude/skills/scroll-reveal-librariesThe exact folder we audited
LicenceMITAs the repository states it
Commit pinned for this verdict2b2fd871ca33A new audit runs when the source changes
Repository statusNot archivedLast push 345 days ago
Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

What it tells the agent

Full source on GitHub ↗

Its description: Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide effects without complex animation…

---
name: scroll-reveal-libraries
description: Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide effects without complex animation orchestration. Triggers on tasks involving scroll animations, scroll-triggered reveals, AOS, simple animations, or basic scroll effects. Alternative to GSAP ScrollTrigger and Locomotive Scroll for simpler use cases. Compare with motion-framer for React-specific animations.
---

# Scroll Reveal Libraries

## Overview

This skill covers AOS (Animate On Scroll), a lightweight CSS-driven library for scroll-triggered animations. AOS excels at simple fade, slide, and zoom effects activated when elements enter the viewport.

**Key Features**:
- **Minimal Setup**: Single JavaScript file + CSS
- **Data Attribute API**: Configure animations in HTML
- **Performance**: CSS-driven, GPU-accelerated animations
- **50+ Built-in Animations**: Fades, slides, zooms, flips
- **Framework Agnostic**: Works with vanilla JS, React, Vue, etc.

**When to Use**:
- Marketing/landing pages with simple scroll effects
- Content-heavy sites (blogs, documentation)
- Quick prototypes requiring scroll animations
- Projects where GSAP/Framer Motion complexity isn't needed

**When NOT to Use**:
- Complex animation timelines or orchestration → Use GSAP ScrollTrigger
- Physics-based animations → Use React Spring or Framer Motion
- Precise scroll-synced animations → Use GSAP ScrollTrigger
- Heavy interactive animations → Use Framer Motion

## Core Concepts

### Installation

**CDN (Quickest)**:
```html
<head>
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
  <!-- Content with data-aos attributes -->

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>
```

**NPM/Yarn (Recommended)**:
```bash
npm install aos@next
# or
yarn add aos@next
```

```javascript
import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init();
```

### Basic Usage

Apply animations using the `data-aos` attribute:

```html
<!-- Fade in -->
<div data-aos="fade-in">Content</div>

<!-- Fade up -->
<div data-aos="fade-up">Content</div>

<!-- Slide from right -->
<div data-aos="slide-left">Content</div>

<!-- Zoom in -->
<div data-aos="zoom-in">Content</div>
```

### Configuration Options

**Global Configuration**:
```javascript
AOS.init({
  // Animation settings
  duration: 800,  // Animation duration (ms): 0-3000
  delay: 0,       // Delay before animation (ms): 0-3000
  offset: 120,    // Offset from trigger point (px)
  easing: 'ease', // Easing function
  once: false,    // Animate only once (true) or every time (false)
  mirror: false,  // Animate out when scrolling past

  // Placement
  anchorPlacement: 'top-bottom', // Which position triggers animation

  // Performance
  disable: false,                // Disable on mobile/tablet
  startEvent: 'DOMContentLoaded', // Initialization event
  debounceDelay: 50,             // Window resize debounce
  throttleDelay: 99              // Scroll throttle
});
```

**Per-Element Overrides**:
```html
<div
  data-aos="fade-up"
  data-aos-duration="1000"
  data-aos-delay="200"
  data-aos-offset="50"
  data-aos-easing="ease-in-out"
  data-aos-once="true"
  data-aos-mirror="true"
  data-aos-anchor-placement="center-bottom"
>
  Custom configured element
</div>
```

## Common Patterns

### 1. Landing Page Hero Section

```html
<section class="hero">
  <!-- Staggered heading words -->
  <h1
    data-aos="fade-down"
    data-aos-duration="800"
  >
    Welcome to the Future
  </h1>

  <!-- Delayed subheading -->
  <p
    data-aos="fade-up"
    data-aos-delay="200"
    data-aos-duration="600"
  >
    Transform your ideas into reality
  </p>

  <!-- CTA button -->
  <button
    data-aos="zoom-in"
    data-aos-delay="400"
    data-aos-duration="500"
  >
    Get Started
  </button>
</section>
```

### 2. Feature Cards Grid

```html
<div class="features-grid">
  <!-- Stagger cards with increasing delays -->
  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="0"
  >
    <h3>Feature 1</h3>
    <p>Description...</p>
  </div>

  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="100"
  >
    <h3>Feature 2</h3>
    <p>Description...</p>
  </div>

  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="200"
  >
    <h3>Feature 3</h3>
    <p>Description...</p>
  </div>
</div>
```

### 3. Alternating Content Sections

```html
<!-- Content from left -->
<div class="section">
  <div
    class="content"
    data-aos="slide-right"
    data-aos-duration="800"
  >
    <h2>Section Title</h2>
    <p>Content slides in from left...</p>
  </div>
  <img
    src="image1.jpg"
    data-aos="fade-left"
    data-aos-delay="200"
  />
</div>

<!-- Content from right -->
<div class="section reverse">
  <img
    src="image2.jpg"
    data-aos="fade-right"
  />
  <div
    class="content"
    data-aos="slide-left"
    data-aos-duration="800"
    data-aos-delay="200"
  >
    <h2>Section Title</h2>
    <p>Content slides in from right...</p>
  </div>
</div>
```

### 4. Scroll-Triggered Testimonials

```html
<div class="testimonials">
  <div
    class="testimonial"
    data-aos="zoom-in"
    data-aos-duration="500"
  >
    <blockquote>"Amazing product!"</blockquote>
    <cite>- John Doe</cite>
  </div>

  <div
    class="testimonial"
    data-aos="zoom-in"
    data-aos-duration="500"
    data-aos-delay="100"
  >
    <blockquote>"Exceeded expectations"</blockquote>
    <cite>- Jane Smith</cite>
  </div>
</div>
```

### 5. Custom Anchor Triggers

Trigger animations based on a different element's scroll position:

```html
<!-- Fixed sidebar animates based on main content scroll -->
<div class="main-content">
  <div id="trigger-point" data-aos-id="sidebar-trigge

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

Install

Pinned to the audited commit 2b2fd87

Download folder ↗

npm install aos@next

git clone https://github.com/freshtechbro/claudedesignskills
git -C claudedesignskills checkout 2b2fd871ca33

Commands as the repository documents them: shown, never run by us. Our verdict covers commit 2b2fd871ca33 only.

Works in which agents?

What its own text says, not a test

“Mentioned” means the skill’s text names the agent. We have not run it there.
Agent	Status	More
Cursor	Mentioned in its text, not tested	Skills for Cursor · About Cursor

Audit history

Every audit, every source change

2026-10-31
✓SAFE B 89 / 100
first audit · source 2b2fd871ca33

README badge

For maintainers · shows the latest audit

[![ModelsAtlas: SAFE B](https://modelsatlas.com/skills/freshtechbro/scroll-reveal-libraries/badge.svg)](https://modelsatlas.com/skills/freshtechbro/scroll-reveal-libraries/)

The badge shows our verdict and grade for this skill, and links back to this page. It changes when the audit does.

Similar skills

writing-skills✓SAFE

obra/superpowers

Use when creating new skills, editing existing skills, or verifying skills work before deployment

★ 310kGrade B

grill-with-docs✓SAFE

mattpocock/skills

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

★ 308kGrade B

grilling✓SAFE

mattpocock/skills

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

★ 308kGrade B

Add this badge to your README

[![ModelsAtlas: SAFE B](https://modelsatlas.com/skills/freshtechbro/scroll-reveal-libraries/badge.svg)](https://modelsatlas.com/skills/freshtechbro/scroll-reveal-libraries/)

<a href="https://modelsatlas.com/skills/freshtechbro/scroll-reveal-libraries/"><img src="https://modelsatlas.com/skills/freshtechbro/scroll-reveal-libraries/badge.svg" alt="ModelsAtlas: SAFE B"></a>

Questions about scroll-reveal-libraries

What does the scroll-reveal-libraries skill do?

A comprehensive collection of Claude Code skills for modern web development, specializing in 3D graphics, animation, and interactive web experiences.

Is scroll-reveal-libraries safe to install?

The audit found nothing in the source that contradicts what it says it does, and graded it B (89/100). Grade A is held back for packages that have also passed a sandboxed behavioural run, which is why a clean skill reads B.

What can scroll-reveal-libraries access on my machine?

The audit observed no filesystem, network or shell use at all in its source.

Which assistants does scroll-reveal-libraries work with?

Its documentation mentions cursor. That is what the text claims, not a compatibility test we ran.

How current is this page?

The grade is for one exact copy of the source (2b2fd871ca33), read on 2026-10-31. The repository is watched, and a new audit runs when it changes — this is the first audit.

Sources

github.com/freshtechbro/claudedesignskills/tree/main/.claude/ski — the audited source at commit 2b2fd871ca33 and every finding aboveObserved · 31 Oct 2026

Spotted something wrong? Report a correction · Methodology

Keep going in your AI

Opens with this page as the source. We add nothing else to the prompt.

What does the scroll-reveal-libraries skill do?
GChatGPT CClaude PPerplexity
Is scroll-reveal-libraries safe to install?
GChatGPT CClaude PPerplexity
What can scroll-reveal-libraries access on my machine?
GChatGPT CClaude PPerplexity