Skip to content

Commit 07474b9

Browse files
dhigginbothamdhigginbotham
committed
init commit, all the things
0 parents  commit 07474b9

31 files changed

Lines changed: 18585 additions & 0 deletions

‎.gitignore‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Dependencies
2+
node_modules
3+
4+
# Build output
5+
dist/
6+
7+
# Logs
8+
npm-debug.log*
9+
yarn-debug.log*
10+
yarn-error.log*
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Coverage directory used by tools like istanbul
19+
coverage/
20+
21+
# nyc test coverage
22+
.nyc_output
23+
24+
# Dependency directories
25+
node_modules/
26+
jspm_packages/
27+
28+
# Optional npm cache directory
29+
.npm
30+
31+
# Optional REPL history
32+
.node_repl_history
33+
34+
# Output of 'npm pack'
35+
*.tgz
36+
37+
# Yarn Integrity file
38+
.yarn-integrity
39+
40+
# dotenv environment variables file
41+
.env
42+
43+
# IDE
44+
.vscode/
45+
.idea/
46+
47+
# OS
48+
.DS_Store
49+
Thumbs.db

‎LICENSE‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
ISC License
2+
3+
Copyright (c) 2025, 7TV Styles
4+
5+
Permission to use, copy, modify, and/or distribute this software for any
6+
purpose with or without fee is hereby granted, provided that the above
7+
copyright notice and this permission notice appear in all copies.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
10+
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
11+
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
12+
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
13+
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
14+
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
15+
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

‎LICENSE.md‎

Whitespace-only changes.

‎README.md‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
# 7TV Styles
2+
3+
A React component library for beautiful paint effects and gradient text styling, featuring 189+ unique effects scraped from 7tv.app.
4+
5+
## Installation
6+
7+
```bash
8+
npm install 7tv-styles
9+
```
10+
11+
## Quick Start
12+
13+
### Tree-Shakeable Usage (Recommended)
14+
15+
```jsx
16+
import React from 'react'
17+
import { PaintTreeShakeable as Paint } from '7tv-styles/tree-shakeable'
18+
import { summer, rainbow, fireAndIce } from '7tv-styles/effects'
19+
20+
function App() {
21+
return (
22+
<div>
23+
<Paint effectStyle={summer}>Summer Vibes</Paint>
24+
<Paint effectStyle={rainbow}>Rainbow Magic</Paint>
25+
<Paint effectStyle={fireAndIce}>Fire & Ice</Paint>
26+
</div>
27+
)
28+
}
29+
```
30+
31+
### Regular Usage (All Effects Bundled)
32+
33+
```jsx
34+
import React from 'react'
35+
import { Paint } from '7tv-styles'
36+
37+
function App() {
38+
return (
39+
<div>
40+
<Paint effect="summer">Summer Vibes</Paint>
41+
<Paint effect="rainbow">Rainbow Magic</Paint>
42+
<Paint effect="fire-and-ice">Fire & Ice</Paint>
43+
</div>
44+
)
45+
}
46+
```
47+
48+
## Available Effects
49+
50+
This library includes 189+ paint effects:
51+
52+
- **Seasonal**: `summer`, `halloween-fever`, `easter-candy`, `spring-flowers`, `autumn-forest`
53+
- **Food & Drink**: `hamburger`, `latte-macchiato`, `avocado`, `watermelon-slice`, `pineapple`
54+
- **Nature**: `lavender-field`, `coral-reef`, `sunflower`, `forest-spring`, `beach-please`
55+
- **Fantasy**: `warlock`, `spaceship`, `enchanted`, `supernova`, `elder-dragon`
56+
- **Unique**: `vaporwave`, `nuclear-waste`, `factory-error`, `cyber-optics`, `tie-dye`
57+
- **And many more!**
58+
59+
## API
60+
61+
### Paint Component
62+
63+
```jsx
64+
<Paint effect="effect-name" {...props}>
65+
Your text here
66+
</Paint>
67+
```
68+
69+
#### Props
70+
71+
- `effect` (string): The paint effect to apply
72+
- `children` (ReactNode): The text content to style
73+
- `...props`: Any additional props are passed to the underlying `<span>` element
74+
75+
## Examples
76+
77+
### Basic Usage
78+
79+
```jsx
80+
<Paint effect="prismatic">Prismatic Text</Paint>
81+
<Paint effect="nightclub">Nightclub Vibes</Paint>
82+
<Paint effect="tropical">Tropical Paradise</Paint>
83+
```
84+
85+
### Tree-Shakeable Usage Examples
86+
87+
```jsx
88+
// Import only the effects you need
89+
import { PaintTreeShakeable as Paint } from '7tv-styles/tree-shakeable'
90+
import { kawaii, vaporwave, factoryError } from '7tv-styles/effects'
91+
92+
// Use with custom styling
93+
<Paint
94+
effectStyle={kawaii}
95+
style={{ fontSize: '48px', fontWeight: 'bold' }}
96+
>
97+
Kawaii Style!
98+
</Paint>
99+
100+
// Multiple effects in one component
101+
function EffectShowcase() {
102+
return (
103+
<div>
104+
<Paint effectStyle={vaporwave}>Vaporwave Vibes</Paint>
105+
<Paint effectStyle={factoryError}>Factory Error</Paint>
106+
</div>
107+
)
108+
}
109+
```
110+
111+
### With Custom Styling (Regular Usage)
112+
113+
```jsx
114+
<Paint
115+
effect="kawaii"
116+
style={{ fontSize: '48px', fontWeight: 'bold' }}
117+
>
118+
Kawaii Style!
119+
</Paint>
120+
```
121+
122+
### Interactive Example
123+
124+
```jsx
125+
import React, { useState } from 'react'
126+
import { Paint } from '7tv-styles'
127+
128+
function InteractiveDemo() {
129+
const [selectedEffect, setSelectedEffect] = useState('summer')
130+
131+
const effects = ['summer', 'rainbow', 'fire-and-ice', 'tropical']
132+
133+
return (
134+
<div>
135+
<Paint effect={selectedEffect} style={{ fontSize: '32px' }}>
136+
{selectedEffect.toUpperCase()} EFFECT
137+
</Paint>
138+
139+
{effects.map(effect => (
140+
<button key={effect} onClick={() => setSelectedEffect(effect)}>
141+
{effect}
142+
</button>
143+
))}
144+
</div>
145+
)
146+
}
147+
```
148+
149+
## Dynamic Gradient Scaling 🔥
150+
151+
The library features a **sick ass dynamic scaling system** developed by our vibe coding team that automatically scales gradient properties based on both element dimensions and font size to maintain consistent visual impact across different text sizes. This ensures that paint effects look absolutely fire whether applied to small labels or massive headings.
152+
153+
### How It Works
154+
155+
Our mathematical scaling algorithms adjust gradients across both X and Y axes:
156+
- **Gradient angles** - Scaled using perceptual scaling laws with power function (exponent 0.6)
157+
- **Color stop positions** - Dynamically adjusted using power function (exponent 0.4)
158+
- **Drop shadow blur radius** - Scaled proportionally to font size
159+
- **Element dimensions** - Real-time measurement of width and height for precise scaling
160+
- **Multi-axis scaling** - Maintains visual consistency across both horizontal and vertical dimensions
161+
162+
### Example
163+
164+
```jsx
165+
// All these will have perfectly scaled gradients that maintain their visual impact
166+
<Paint effect="factory-error" style={{ fontSize: '12px' }}>Small striped text</Paint>
167+
<Paint effect="factory-error" style={{ fontSize: '24px' }}>Medium striped text</Paint>
168+
<Paint effect="factory-error" style={{ fontSize: '48px' }}>Large striped text</Paint>
169+
```
170+
171+
The scaling happens automatically with zero configuration - just pure vibes! ✨
172+
173+
### Technical Details
174+
175+
- **Real-time dimension tracking** using `getBoundingClientRect()`
176+
- **Perceptual scaling laws** for natural visual consistency
177+
- **Performance optimized** with React hooks and memoization
178+
- **Backward compatible** with existing implementations
179+
180+
## Development
181+
182+
### Running the Example
183+
184+
```bash
185+
cd examples
186+
npm install
187+
npm run dev
188+
```
189+
190+
Visit `http://localhost:3000` to see all 189 paint effects in action with an interactive demo.
191+
192+
### Building
193+
194+
```bash
195+
npm run build
196+
```
197+
198+
### Linting
199+
200+
```bash
201+
npm run lint
202+
npm run lint:fix
203+
```
204+
205+
## Features
206+
207+
- **189+ Paint Effects** - Comprehensive collection of gradient and text effects
208+
- **Dynamic Gradient Scaling** - Automatic scaling of gradients based on font size for consistent visual impact
209+
- **Tree Shakeable** - Import only the effects you need for optimal bundle size
210+
- **Dual Usage Modes** - Choose between tree-shakeable imports or all-in-one bundle
211+
- **TypeScript Ready** - Full TypeScript support
212+
- **Responsive** - Works on all screen sizes
213+
- **Zero Dependencies** - Lightweight and fast
214+
- **Hot Module Replacement** - Fast development experience
215+
216+
## Browser Support
217+
218+
- Chrome (latest)
219+
- Firefox (latest)
220+
- Safari (latest)
221+
- Edge (latest)
222+
223+
## Contributing
224+
225+
1. Fork the repository
226+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
227+
3. Commit your changes (`git commit -m 'Add amazing feature'`)
228+
4. Push to the branch (`git push origin feature/amazing-feature`)
229+
5. Open a Pull Request
230+
231+
## License
232+
233+
ISC License - see [LICENSE](LICENSE) file for details.
234+
235+
## Credits
236+
237+
Paint effects scraped from 7tv.app. All credit goes to the 7TV team and community for creating these beautiful effects.
238+
239+
**Special shoutout to our vibe coding team** for developing the sick ass dynamic gradient scaling system that makes these effects look absolutely fire at any size! 🔥✨
240+
241+
The mathematical scaling algorithms and multi-dimensional gradient adjustment system were crafted with pure coding vibes to ensure every paint effect maintains its visual impact across all text sizes.

‎eslint.config.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import neostandard from 'neostandard'
2+
3+
export default [
4+
...neostandard({
5+
// Configure for React since this is a React component library
6+
jsx: true,
7+
// Ignore build output directories and node_modules
8+
ignores: ['lib/**/*', 'examples/dist/**/*', 'examples/node_modules/**/*', 'node_modules/**/*'],
9+
rules: {
10+
'@stylistic/space-before-function-paren': 'off'
11+
}
12+
}),
13+
{
14+
// Configure JSX parsing for all JS files in src
15+
files: ['src/**/*.js', '*.js', 'src/**/*.jsx', '*.jsx'],
16+
languageOptions: {
17+
parserOptions: {
18+
ecmaFeatures: {
19+
jsx: true
20+
}
21+
},
22+
globals: {
23+
React: 'readonly'
24+
}
25+
}
26+
},
27+
{
28+
// Additional configuration for browser globals in example files
29+
files: ['example.jsx', 'examples/**/*.jsx', 'examples/**/*.js'],
30+
languageOptions: {
31+
globals: {
32+
alert: 'readonly',
33+
console: 'readonly',
34+
document: 'readonly',
35+
window: 'readonly',
36+
React: 'readonly'
37+
}
38+
}
39+
}
40+
]

0 commit comments

Comments
 (0)