open-index/open-npm huggingface dataset:
npm package: @sethgunnells/rough-notation
Description: Create and animate hand-drawn annotations using JavaScript
Author: Seth Gunnells
Latest version: 0.1.3

# Rough Notation

[See the original here](https://github.com/pshihn/rough-notation)

This is a fork of Rough Notation that I created for more ease of use with Remotion. The problem with using the existing library with Remotion is two fold:

  1. The seed value for RoughJS is not exposed so it can't be set to be the same across multiple threads when rendering.
  2. The animation is based in CSS animation, meaning it can't be controlled via frame interpolation, another problem for multithreading.

This fork changes a number of things:

  1. A new method has been added allowing for setting the percentage of the SVG that has been "drawn" (that is visible). This allows for animating the annotation via JS and interpolating it by frame for multithreading.
  2. All code related to animation and animation sequencing has been removed as it is not needed for how I am using this fork.
  3. An array of DOM nodes can be passed which will be used to determine the drawing rectangle. This is so something like the markup structure created by syntax highlighting libraries can be annotated without trying to figure out how to wrap the desired nodes.

## Installation

You can add rough-notation to your project via npm

```
npm install --save @sethgunnells/rough-notation
```
npm package: @sethihq/scrub-slider
Description: A slider component with scrub sounds and haptic feedback
Author: sethihq
Latest version: 0.2.1

<p align="center">
  <picture>
    <img src="public/preview.jpg" alt="scrub-slider" width="520" />
  </picture>
</p>

<p align="center">
  <a href="https://scrub-slider.vercel.app">Demo</a> ·
  <a href="https://www.npmjs.com/package/@sethihq/scrub-slider">npm</a>
</p>

---

## Install

```bash
npm i @sethihq/scrub-slider
```

Or as a Claude Code skill:

```bash
npx skills add sethihq/scrub-slider
```

## Usage

```tsx
import { Slider } from "@sethihq/scrub-slider";

<Slider
  label="Frequency"
  value={frequency}
  onValueChange={setFrequency}
  min={0}
  max={1}
  step={0.01}
/>
```

## Props

#### Core

| Prop | Type | Description |
|------|------|-------------|
| `value` | `number` | Current value |
| `onValueChange` | `(v: number) => void` | Change handler |
| `min` | `number` | Minimum value |
| `max` | `number` | Maximum value |
| `step` | `number` | Step increment |

#### Display

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | — | Label text |
| `unit` | `string` | — | Unit suffix (e.g. `%`) |
| `chipPosition` | `"top" \| "bottom"` | `"top"` | Hover chip position |
| `showChip` | `boolean` | `true` | Show/hide hover chip |
| `className` | `string` | — | Additional class names |

#### Feedback

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `enableSound` | `boolean` | `true` | Scrub sounds |
| `enableHaptics` | `boolean` | `true` | Haptic feedback |

## Tokens

```css
:root {
  --surface: #ffffff;
  --on-surface: #0a0a0a;
  --on-surface-muted: #737373;
  --outline: #e5e5e5;
  --chip: #a3a3a3;
  --on-chip: #fafafa;
}
```

## License

MIT
npm package: @sethorax/animus
Description: Parallax and animation library written in TypeScript.
Author: Sethorax
Latest version: 1.2.1

# Animus
[![Build Status](https://travis-ci.com/Sethorax/animus.svg?branch=master)](https://travis-ci.com/Sethorax/animus)
[![Coverage Status](https://coveralls.io/repos/github/Sethorax/animus/badge.svg?branch=master)](https://coveralls.io/github/Sethorax/animus?branch=master)
[![Greenkeeper badge](https://badges.greenkeeper.io/Sethorax/animus.svg)](https://greenkeeper.io/)
[![npm (scoped)](https://img.shields.io/npm/v/@sethorax/animus.svg)](https://www.npmjs.com/package/@sethorax/animus)
[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@sethorax/animus.svg)](https://www.npmjs.com/package/@sethorax/animus)
[![npm type definitions](https://img.shields.io/npm/types/@sethorax/animus.svg)](https://www.typescriptlang.org/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![code style: prettier](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![GitHub](https://img.shields.io/github/license/sethorax/animus.svg)](LICENSE.md)

**Animus** is a small animation and easing library written in TypeScript that aims to provide an easy to use API to easily add animations or easing effects to your project.
npm package: @sethorax/browser-utils
Description: Collection of utility functions for the browser.
Author: Sethorax
Latest version: 1.1.1

# Browser Utils
[![Build Status](https://travis-ci.com/Sethorax/browser-utils.svg?branch=master)](https://travis-ci.com/Sethorax/browser-utils)
[![Coverage Status](https://coveralls.io/repos/github/Sethorax/browser-utils/badge.svg?branch=master)](https://coveralls.io/github/Sethorax/browser-utils?branch=master)
[![Greenkeeper badge](https://badges.greenkeeper.io/Sethorax/browser-utils.svg)](https://greenkeeper.io/)
[![npm (scoped)](https://img.shields.io/npm/v/@sethorax/browser-utils.svg)](https://www.npmjs.com/package/@sethorax/browser-utils)
[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@sethorax/browser-utils.svg)](https://www.npmjs.com/package/@sethorax/browser-utils)
[![npm type definitions](https://img.shields.io/npm/types/@sethorax/browser-utils.svg)](https://www.typescriptlang.org/)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![code style: prettier](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![GitHub](https://img.shields.io/github/license/sethorax/browser-utils.svg)](LICENSE.md)

This utility library provides several functions to make working with non standard browser implementations a more pleasant experience.

## Usage

Browser Utils is available through [NPM](http://npmjs.com) as the [`@sethorax/browser-utils`](https://www.npmjs.com/package/@sethorax/browser-utils) package:

```sh
npm install @sethorax/browser-utils
```

Or via [yarn](https://yarnpkg.com):

```sh
yarn add @sethorax/browser-utils
```
npm package: @sethorax/react-accordion
Description: A simple accordion react component.
Author: Sethorax
Latest version: 1.0.1

# React Accordion

A simple React accordion component.

## Example

```js
import React from 'react';
import ReactDOM from 'react-dom';
import ReactAccordion from '@sethorax/react-accordion';

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            accordionData: [
                {
                    id: 1,
                    title: 'Entry 1',
                    content: '<div>Fancy html content</div>'
                },
                {
                    id: 2,
                    title: 'Entry 2',
                    content: '<div>Fancy html content</div>'
                }
            ]
        }
    }

    render() {
        return (
            <div className="my-app-contents">
                <h1>Accordion</h1>
                <ReactAccordion data={this.state.accordionData} multiple={false} collapsible={true} animation="300"/>
            </div>
        );
    }
}

ReactDOM.render(<App/>, document.getElementById('app'));
```

## Props

Property            | Type   | Default        | Required | Description
:-------------------|:------:|:--------------:|:--------:|:----------------------------------------
data                | array  |                |    yes   | Array of accordion contents.
multiple            | bool   | false          |    no    | Allows multiple accordion entries to be open at the same time.
collapsible         | bool   | true           |    no    | If set to `false` the currently opened accordion entry cannot be closed.
animation           | number | 500            |    no    | Animation speed in milliseconds. If set to `0` animations are disabled completely.

## Licence

[MIT](LICENSE)