bloodspatter-js
v1.0.0
Published
Blood effects library for web applications - realistic blood cells, drips, reveals, and animations
Maintainers
bstxReadme
🩸 BloodSpatter.js
A realistic blood effects library for web applications. Create dynamic blood cells, drips, reveals, and atmospheric effects.
Features
- ✅ Blood Cells - Realistic flowing downward blood cells (4 variations)
- ✅ Blood Reveal - Typing animation with blood scanning effect
- ✅ Blood Smear - Hover effects that reveal blood trails
- ✅ Blood Drips - Page load triggered dripping effects
- ✅ Chat Blood - Flowing blood backgrounds for messages
- ✅ Moving Spatter - Continuous downward blood spatter patterns
- ✅ Server Integration - Trigger effects on server responses
Installation
npm install bloodspatter-jsQuick Start
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/bloodspatter-js/dist/bloodspatter.css">
</head>
<body>
<div id="my-container">Content here</div>
<script src="node_modules/bloodspatter-js/dist/bloodspatter.js"></script>
<script>
// Add blood cells
BloodSpatter.addBloodCells(document.getElementById('my-container'), 5);
</script>
</body>
</html>ES6 Modules
import BloodSpatter from 'bloodspatter-js';
import 'bloodspatter-js/dist/bloodspatter.css';
// Add blood effects
BloodSpatter.addBloodCells(document.getElementById('container'), 3);
BloodSpatter.triggerBloodReveal(element, 'New evidence discovered...');CDN
<link rel="stylesheet" href="https://unpkg.com/bloodspatter-js/dist/bloodspatter.css">
<script src="https://unpkg.com/bloodspatter-js/dist/bloodspatter.js"></script>API Reference
BloodSpatter.addBloodCells(container, count)
Creates realistic blood cells that flow downward with gravity.
// Add 5 blood cells to container
BloodSpatter.addBloodCells(document.getElementById('chat-message'), 5);Parameters:
container(Element) - DOM element to add blood cells tocount(Number) - Number of blood cells to create (default: 3)
BloodSpatter.triggerBloodReveal(container, text)
Creates a typing animation with blood scanning effect.
// Reveal text with blood effect
BloodSpatter.triggerBloodReveal(messageEl, 'Blood analysis complete...');Parameters:
container(Element) - DOM element containing texttext(String) - Text to reveal (optional, uses existing text if not provided)
BloodSpatter.addBloodDrips(container, count)
Adds blood drip effects to a container.
// Add 8 blood drips
BloodSpatter.addBloodDrips(document.body, 8);Parameters:
container(Element) - DOM element to add drips tocount(Number) - Number of drips to create (default: 5)
BloodSpatter.addChatBloodBG(messageElement)
Adds flowing blood background to chat messages.
// Add blood background to message
BloodSpatter.addChatBloodBG(document.querySelector('.chat-message'));Parameters:
messageElement(Element) - Message element to add blood background to
BloodSpatter.clearBloodCells(container)
Removes all blood cells from a container.
// Clear all blood cells
BloodSpatter.clearBloodCells(document.getElementById('container'));Parameters:
container(Element) - DOM element to clear blood cells from
BloodSpatter.resetBloodReveal(container)
Resets blood reveal effect to original state.
// Reset reveal effect
BloodSpatter.resetBloodReveal(document.getElementById('message'));CSS Classes
The library includes these CSS classes for styling:
Blood Cells
.blood-cell- Base blood cell style.blood-cell-1to.blood-cell-4- Different blood cell variations.blood-cell-animated- Animation class for downward movement
Blood Effects
.blood-smear-hover- Hover effect for blood smears.blood-reveal- Container for blood reveal effect.blood-reveal-text- Text element for reveal animation.chat-blood-background- Blood background for chat messages.blood-spatter-moving- Continuous moving blood spatter
Server Integration
Chat Application Example
// When server responds with message
fetch('/api/chat', {
method: 'POST',
body: JSON.stringify({message: userInput})
})
.then(response => response.json())
.then(data => {
// Add message to chat
const messageEl = addChatMessage(data.response);
// Trigger blood effects based on content
if (data.response.includes('blood') || data.response.includes('evidence')) {
BloodSpatter.triggerBloodReveal(messageEl, data.response);
BloodSpatter.addBloodCells(messageEl, 3);
}
if (data.response.includes('crime scene')) {
BloodSpatter.addChatBloodBG(messageEl);
}
});Page Load Effects
// Add ambient blood effects on page load
window.addEventListener('load', () => {
BloodSpatter.addBloodDrips(document.body, 5);
// Add blood cells to existing messages
document.querySelectorAll('.message').forEach(msg => {
if (Math.random() < 0.3) { // 30% chance
BloodSpatter.addBloodCells(msg, 2);
}
});
});Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
Bundle Size
- Minified: ~8kb
- Gzipped: ~3kb
Development
# Install dependencies
npm install
# Build package
npm run build
# Watch for changes
npm run devLicense
MIT License - see LICENSE file for details.
Contributing
- Fork the repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Create a Pull Request
Changelog
v1.0.0
- Initial release
- Blood cells with 4 variations
- Blood reveal typing animation
- Blood smear hover effects
- Blood drip effects
- Chat blood backgrounds
- Moving blood spatter patterns