A React component library for beautiful paint effects and gradient text styling, featuring 189+ unique effects scraped from 7tv.app.
npm install 7tv-stylesA React component library for beautiful paint effects and gradient text styling, featuring 189+ unique effects scraped from 7tv.app.
Experience all 189+ paint effects with dynamic gradient scaling! Click any effect to see it in action across different font sizes. Test the Factory Error effect to see the sick ass X and Y axis scaling system developed by our vibe coding team.
``bash`
npm install 7tv-styles
`jsx
import React from 'react'
import { PaintTreeShakeable as Paint } from '7tv-styles/tree-shakeable'
import { summer, rainbow, fireAndIce } from '7tv-styles/effects'
function App() {
return (
$3
jsx
import React from 'react'
import { Paint } from '7tv-styles'function App() {
return (
Summer Vibes
Rainbow Magic
Fire & Ice
)
}
`Available Effects
This library includes 189+ paint effects:
- Seasonal:
, halloween-fever, easter-candy, spring-flowers, autumn-forest
- Food & Drink: , latte-macchiato, avocado, watermelon-slice, pineapple
- Nature: , coral-reef, sunflower, forest-spring, beach-please
- Fantasy: , spaceship, enchanted, supernova, elder-dragon
- Unique: , nuclear-waste, factory-error, cyber-optics, tie-dye
- And many more!API
$3
jsx
Your text here
`#### Props
-
(string): The paint effect to apply
- children (ReactNode): The text content to style
- ...props: Any additional props are passed to the underlying elementExamples
$3
`jsx
Prismatic Text
Nightclub Vibes
Tropical Paradise
`$3
jsx
// Import only the effects you need
import { PaintTreeShakeable as Paint } from '7tv-styles/tree-shakeable'
import { kawaii, vaporwave, factoryError } from '7tv-styles/effects'// Use with custom styling
style={{ fontSize: '48px', fontWeight: 'bold' }}
>
Kawaii Style!
// Multiple effects in one component
function EffectShowcase() {
return (
Vaporwave Vibes
Factory Error
)
}
`$3
jsx
style={{ fontSize: '48px', fontWeight: 'bold' }}
>
Kawaii Style!
`$3
jsx
import React, { useState } from 'react'
import { Paint } from '7tv-styles'function InteractiveDemo() {
const [selectedEffect, setSelectedEffect] = useState('summer')
const effects = ['summer', 'rainbow', 'fire-and-ice', 'tropical']
return (
{selectedEffect.toUpperCase()} EFFECT
{effects.map(effect => (
))}
)
}
`Dynamic Gradient Scaling 🔥
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.
$3
Our mathematical scaling algorithms adjust gradients across both X and Y axes:
- Gradient angles - Scaled using perceptual scaling laws with power function (exponent 0.6)
- Color stop positions - Dynamically adjusted using power function (exponent 0.4)
- Drop shadow blur radius - Scaled proportionally to font size
- Element dimensions - Real-time measurement of width and height for precise scaling
- Multi-axis scaling - Maintains visual consistency across both horizontal and vertical dimensions
$3
jsx
// All these will have perfectly scaled gradients that maintain their visual impact
Small striped text
Medium striped text
Large striped text
`The scaling happens automatically with zero configuration - just pure vibes! ✨
$3
- Real-time dimension tracking using
- Perceptual scaling laws for natural visual consistency
- Performance optimized with React hooks and memoization
- Backward compatible with existing implementationsDevelopment
$3
bash
cd examples
npm install
npm run dev
`Visit
to see all 189 paint effects in action with an interactive demo.$3
`bash
npm run build
`$3
bash
npm run lint
npm run lint:fix
`Features
- 189+ Paint Effects - Comprehensive collection of gradient and text effects
- Dynamic Gradient Scaling - Automatic scaling of gradients based on font size for consistent visual impact
- Tree Shakeable - Import only the effects you need for optimal bundle size
- Dual Usage Modes - Choose between tree-shakeable imports or all-in-one bundle
- TypeScript Ready - Full TypeScript support
- Responsive - Works on all screen sizes
- Zero Dependencies - Lightweight and fast
- Hot Module Replacement - Fast development experience
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Contributing
1. Fork the repository
2. Create your feature branch (
)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)ISC License - see LICENSE file for details.
Paint effects scraped from 7tv.app. All credit goes to the 7TV team and community for creating these beautiful effects.
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! 🔥✨
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.