···
+
--ripple-color: rgba(77, 250, 123, 0.04);
+
--ripple-color-strong: rgba(77, 250, 123, 0.06);
+
--matrix-color: rgba(77, 250, 123, 0.2);
+
--matrix-glow: rgba(77, 250, 123, 0.1);
+
--hover-glow: rgba(77, 250, 123, 0.15);
···
color: var(--text-color);
+
background: linear-gradient(rgba(10, 23, 15, 0.82), rgba(10, 23, 15, 0.92));
···
border-left: 3px solid transparent;
+
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-left-color: var(--accent-color);
+
background-color: rgba(21, 39, 32, 0.95);
+
background: radial-gradient(circle at var(--mouse-x, 0%) var(--mouse-y, 0%),
+
rgba(77, 250, 123, 0.06) 0%,
+
rgba(77, 250, 123, 0.04) 30%,
+
rgba(77, 250, 123, 0) 70%);
+
transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
···
+
.feed-item:hover::before {
···
+
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
background-color: rgba(21, 39, 32, 0.95);
border-left-color: var(--accent-color);
+
background: radial-gradient(circle at var(--mouse-x, 0%) var(--mouse-y, 0%),
+
rgba(77, 250, 123, 0.06) 0%,
+
rgba(77, 250, 123, 0.04) 30%,
+
rgba(77, 250, 123, 0) 70%);
+
transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
+
.link-item:hover::before {
font-family: 'JetBrains Mono', monospace;
···
+
<canvas id="matrix-background"></canvas>
<div class="header-container">
<div class="header-left">
···
document.addEventListener('DOMContentLoaded', async () => {
+
// Matrix background effect
+
const canvas = document.getElementById('matrix-background');
+
const ctx = canvas.getContext('2d');
+
// Set canvas size to match window
+
function resizeCanvas() {
+
canvas.width = window.innerWidth;
+
canvas.height = window.innerHeight;
+
window.addEventListener('resize', resizeCanvas);
+
// Vine/plant-related characters and elements
+
const vineChars = '┃┃│┋┇┊┆╽╿┴┬╵╷└┕┖┗┘┙┚┛╘╙╚╛╯╰╱╲⌠⌡╎▏▕⏐▌▐░▒▓◥◤◢◣⎸⎹│';
+
const leafChars = '☘❀✿❁❃❇❈❉❊❋✣✤✥✦✧✩✪✫✬✭✮✾✿❀❁❂❃❄⚘♠♣⚜⚘☘';
+
const branchChars = '┌┐┘└├┬┴┤┼─┄┈┉┊┋╱╲╳☂⚢⌒~∞≈≋⋆✧✦✫';
+
const columns = Math.floor(canvas.width / fontSize * 0.7); // Fewer columns for sparser vines
+
// Drop positions for each column
+
// Initialize drops at random positions
+
for (let i = 0; i < columns; i++) {
+
// Random starting position
+
drops[i] = Math.random() * -canvas.height;
+
// Set up column types - some will be vines, some will have leaves
+
const columnTypes = [];
+
for (let i = 0; i < columns; i++) {
+
// 70% of columns are vines, 25% are leaves, 5% are cross-connections
+
const rand = Math.random();
+
columnTypes[i] = 'vine';
+
} else if (rand < 0.95) {
+
columnTypes[i] = 'leaf';
+
columnTypes[i] = 'branch';
+
// Store connections between vines
+
const connections = [];
+
// Helper function to find nearby columns
+
function findNearbyColumns(columnIndex, maxDistance = 3) {
+
for (let i = 0; i < columns; i++) {
+
if (i !== columnIndex && Math.abs(i - columnIndex) <= maxDistance) {
+
// Last time random chars were changed
+
const lastCharChangeTime = [];
+
// The current characters displayed
+
const currentChars = [];
+
// Width/thickness of vines
+
const vineThickness = [];
+
for (let i = 0; i < columns; i++) {
+
lastCharChangeTime[i] = [];
+
// Random vine thickness between 1-3
+
vineThickness[i] = Math.floor(Math.random() * 3) + 1;
+
for (let j = 0; j < canvas.height / fontSize; j++) {
+
lastCharChangeTime[i][j] = 0;
+
if (columnTypes[i] === 'vine') {
+
// Choose vine characters based on position and thickness
+
// Top of vine - might be a leaf or flower
+
currentChars[i][j] = Math.random() < 0.6 ?
+
leafChars.charAt(Math.floor(Math.random() * leafChars.length)) :
+
vineChars.charAt(Math.floor(Math.random() * vineChars.length));
+
const vineIndex = Math.min(vineThickness[i] * 3, vineChars.length - 1);
+
currentChars[i][j] = vineChars.charAt(Math.floor(Math.random() * vineIndex));
+
} else if (columnTypes[i] === 'leaf') {
+
// Leaf character - only at top or occasional spots along the vine
+
if (j === 0 || Math.random() < 0.2) {
+
currentChars[i][j] = leafChars.charAt(Math.floor(Math.random() * leafChars.length));
+
currentChars[i][j] = vineChars.charAt(Math.floor(Math.random() * 5)); // Thin vine characters
+
} else if (columnTypes[i] === 'branch') {
+
// This is a branching column - will form connections between vines
+
// Top of branch might be a leaf or flower
+
currentChars[i][j] = leafChars.charAt(Math.floor(Math.random() * leafChars.length));
+
// Branch characters - horizontal or diagonal connectors
+
currentChars[i][j] = branchChars.charAt(Math.floor(Math.random() * branchChars.length));
+
// Time when animation started
+
const startTime = Date.now();
+
// Track connections between vines
+
const crossConnections = [];
+
// Draw the rainforest vine effect
+
function drawVineEffect() {
+
// Semi-transparent background to create fade effect
+
ctx.fillStyle = 'rgba(10, 23, 15, 0.05)';
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
+
const now = Date.now();
+
ctx.font = `${fontSize}px 'JetBrains Mono', monospace`;
+
ctx.textAlign = 'center';
+
// First, create cross-connections
+
// Create new cross-connections occasionally
+
if (Math.random() < 0.01) {
+
// Find a source vine that's grown enough
+
const sourceIndex = Math.floor(Math.random() * columns);
+
if (drops[sourceIndex] > 100 && columnTypes[sourceIndex] === 'vine') {
+
// Find a nearby column to connect to
+
const nearby = findNearbyColumns(sourceIndex, 3);
+
if (nearby.length > 0) {
+
const targetIndex = nearby[Math.floor(Math.random() * nearby.length)];
+
if (drops[targetIndex] > 80) {
+
// The height should be somewhere between the two vines
+
const sourceHeight = drops[sourceIndex];
+
const targetHeight = drops[targetIndex];
+
const connectionHeight = Math.min(sourceHeight, targetHeight) * 0.8;
+
// Create the connection
+
crossConnections.push({
+
height: connectionHeight,
+
character: branchChars.charAt(Math.floor(Math.random() * branchChars.length)),
+
for (let i = 0; i < columns; i++) {
+
// Calculate current position of this vine
+
const x = i * fontSize * 1.5; // Space vines further apart
+
// For each character in this column
+
for (let j = 0; j < Math.ceil(drops[i] / fontSize); j++) {
+
const y = j * fontSize;
+
// Skip rendering some characters to create gaps in vines
+
if (Math.random() < 0.05 && j > 3) continue;
+
// Calculate age of this character
+
const charAge = now - lastCharChangeTime[i][j];
+
// Randomly change some characters over time - slower rate for natural movement
+
if (j === 0 && (Math.random() < 0.005 || charAge > 8000)) {
+
// Top character might change between leaves/flowers
+
if (columnTypes[i] === 'leaf' || Math.random() < 0.6) {
+
currentChars[i][j] = leafChars.charAt(Math.floor(Math.random() * leafChars.length));
+
currentChars[i][j] = vineChars.charAt(Math.floor(Math.random() * vineChars.length));
+
lastCharChangeTime[i][j] = now;
+
} else if (j > 0 && Math.random() < 0.001) {
+
// Occasionally grow new leaves along the vine
+
if (Math.random() < 0.2) {
+
currentChars[i][j] = leafChars.charAt(Math.floor(Math.random() * leafChars.length));
+
const vineIndex = Math.min(vineThickness[i] * 3, vineChars.length - 1);
+
currentChars[i][j] = vineChars.charAt(Math.floor(Math.random() * vineIndex));
+
lastCharChangeTime[i][j] = now;
+
// Calculate distance from head of the vine
+
const distanceFromHead = (drops[i] - y);
+
// Determine color based on position and type
+
if (j === 0 && (currentChars[i][j] === '❀' || currentChars[i][j] === '✿' ||
+
currentChars[i][j] === '❁' || currentChars[i][j] === '✾')) {
+
// Flowers are more colorful - pinkish
+
ctx.fillStyle = 'rgba(255, 180, 220, 0.9)';
+
ctx.shadowColor = 'rgba(255, 150, 200, 0.6)';
+
} else if (currentChars[i][j] === '☘' || leafChars.includes(currentChars[i][j])) {
+
// Leaf characters are brightest with different green
+
ctx.fillStyle = 'rgba(120, 255, 150, 0.9)';
+
ctx.shadowColor = 'rgba(77, 250, 123, 0.5)';
+
} else if (distanceFromHead < fontSize) {
+
// Growing tip of vine is brightest
+
ctx.fillStyle = 'rgba(120, 255, 150, 0.9)';
+
ctx.shadowColor = 'rgba(77, 250, 123, 0.5)';
+
} else if (distanceFromHead < fontSize * 8) {
+
// Newer part of vine is brighter
+
const opacity = 0.8 - (distanceFromHead / (fontSize * 10));
+
ctx.fillStyle = `rgba(77, 180, 100, ${opacity.toFixed(2)})`;
+
ctx.shadowColor = 'transparent';
+
// Older parts of vine are darker
+
const opacity = Math.max(0, 0.4 - (distanceFromHead / (canvas.height * 2)));
+
// Darker green for older vines
+
ctx.fillStyle = `rgba(40, 120, 60, ${opacity.toFixed(2)})`;
+
ctx.shadowColor = 'transparent';
+
// Add slight random swaying to vines
+
const swayAmount = Math.sin((now / 2000) + i) * 2; // Gentle swaying effect
+
const adjustedX = x + swayAmount;
+
if (y < canvas.height) {
+
// Adjust size for special characters
+
if (leafChars.includes(currentChars[i][j])) {
+
ctx.font = `${fontSize * 1.2}px 'JetBrains Mono', monospace`;
+
ctx.fillText(currentChars[i][j], adjustedX, y);
+
ctx.font = `${fontSize}px 'JetBrains Mono', monospace`; // Reset font
+
ctx.fillText(currentChars[i][j], adjustedX, y);
+
// Move the vine down - slower for natural growth
+
drops[i] += fontSize * (0.02 + Math.random() * 0.03);
+
// Reset vine when it reaches bottom or randomly (much less frequent)
+
if (drops[i] > canvas.height * 2 || (Math.random() < 0.0005 && drops[i] > canvas.height * 0.6)) {
+
drops[i] = Math.random() * -30;
+
// Maybe change vine type
+
if (Math.random() < 0.3) {
+
columnTypes[i] = Math.random() < 0.7 ? 'vine' : 'leaf';
+
vineThickness[i] = Math.floor(Math.random() * 3) + 1;
+
// Draw cross connections between vines
+
crossConnections.forEach((connection, index) => {
+
const sourceX = connection.source * fontSize * 1.5;
+
const targetX = connection.target * fontSize * 1.5;
+
const y = connection.height;
+
const heightIndex = Math.floor(y / fontSize);
+
// Calculate a safe display Y - make sure it's within the grown vines
+
const safeY = Math.min(
+
Math.min(drops[connection.source], drops[connection.target]),
+
// Convert to display coords
+
const displayY = Math.floor(safeY / fontSize) * fontSize;
+
// Only draw if connection is within visible area
+
if (displayY < 0 || displayY > canvas.height) return;
+
// Connection age effect
+
const age = now - connection.created;
+
const maxAge = 20000; // 20 seconds lifetime for connections
+
// Remove old connections
+
crossConnections.splice(index, 1);
+
} else if (age > maxAge - 2000) {
+
opacity = (maxAge - age) / 2000;
+
const connectionWidth = Math.abs(targetX - sourceX);
+
const steps = Math.ceil(connectionWidth / (fontSize * 0.8));
+
// Lighter green for branches
+
ctx.fillStyle = `rgba(120, 255, 150, ${opacity.toFixed(2)})`;
+
ctx.shadowColor = 'rgba(77, 250, 123, 0.4)';
+
// Draw branch character at each step
+
if (sourceX < targetX) {
+
for (let s = 0; s <= steps; s++) {
+
const progress = s / steps;
+
const stepX = sourceX + (targetX - sourceX) * progress;
+
const wiggle = Math.sin(progress * Math.PI) * 5;
+
// Choose appropriate connection character
+
let connChar = branchChar;
+
// Special characters for start, middle and end
+
} else if (s === steps) {
+
} else if (s === Math.floor(steps/2)) {
+
// Add a leaf or flower in the middle sometimes
+
if (Math.random() < 0.3) {
+
connChar = leafChars.charAt(Math.floor(Math.random() * leafChars.length));
+
connChar = s % 2 === 0 ? '┼' : '┴';
+
// Occasional decorative elements
+
if (Math.random() < 0.1) {
+
ctx.fillText(connChar, stepX, displayY + wiggle);
+
requestAnimationFrame(drawVineEffect);
// Add hover event listeners after DOM content is loaded
function setupHoverEffects() {
// Keep track of the currently active item
···
document.querySelectorAll('.feed-item').forEach(item => {
item.addEventListener('mouseenter', () => {
// Set this as current hovered item
currentHoveredItem = item;
+
// Track mouse position for the ripple effect
+
item.addEventListener('mousemove', (e) => {
+
// Get position relative to the element
+
const rect = item.getBoundingClientRect();
+
const x = ((e.clientX - rect.left) / rect.width) * 100;
+
const y = ((e.clientY - rect.top) / rect.height) * 100;
+
// Set custom properties for the radial gradient
+
item.style.setProperty('--mouse-x', `${x}%`);
+
item.style.setProperty('--mouse-y', `${y}%`);
···
<article id="${entry.articleId}" class="feed-item" ${dateAttr}>
<div class="feed-item-row">
+
<div class="feed-item-date">${getDayWithOrdinal(date)} ${shortMonthNames[month]} ${year}</div>
<div class="feed-item-author">${entry.author}</div>
<div class="feed-item-content-wrapper">
<div class="feed-item-title"><a href="${entry.link}" target="_blank">${entry.title}</a></div><div class="feed-item-preview">${entry.contentHtml}</div>
···
+
// Set up hover effects and ripple animations
+
// Create a ripple effect that travels across the content area
+
const feedContainer = document.querySelector('.feed-container');
+
feedContainer.addEventListener('mousemove', (e) => {
+
// Ripple between items as mouse moves
+
const items = document.querySelectorAll('.feed-item, .link-item');
+
items.forEach(item => {
+
const rect = item.getBoundingClientRect();
+
const centerX = rect.left + rect.width / 2;
+
const centerY = rect.top + rect.height / 2;
+
// Calculate distance from mouse to center of item
+
const dx = e.clientX - centerX;
+
const dy = e.clientY - centerY;
+
const distance = Math.sqrt(dx * dx + dy * dy);
+
// Calculate fade based on distance
+
const maxDistance = 400; // max distance for effect
+
const intensity = Math.max(0, 1 - (distance / maxDistance));
+
if (intensity > 0.05) {
+
// Extremely subtle glow - minimized for optimal text readability
+
item.style.boxShadow = `0 0 ${intensity * 8}px var(--hover-glow)`;
+
item.style.transform = `scale(${1 + intensity * 0.005})`;
+
item.style.transition = 'box-shadow 0.4s ease-out, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)';
+
item.style.boxShadow = 'none';
+
item.style.transform = 'scale(1)';
+
// Add hover tracking for link items too
+
document.querySelectorAll('.link-item').forEach(item => {
+
item.addEventListener('mousemove', (e) => {
+
// Get position relative to the element
+
const rect = item.getBoundingClientRect();
+
const x = ((e.clientX - rect.left) / rect.width) * 100;
+
const y = ((e.clientY - rect.top) / rect.height) * 100;
+
// Set custom properties for the radial gradient
+
item.style.setProperty('--mouse-x', `${x}%`);
+
item.style.setProperty('--mouse-y', `${y}%`);
// Process all external links from entries
const linksContainer = document.getElementById('link-items');
const allExternalLinks = [];
···
<div class="link-item" data-year="${date.getFullYear()}" data-month="${date.getMonth()}">
+
<div class="link-item-date">${getLinkDayWithOrdinal(date)} ${shortMonthNames[date.getMonth()]} ${date.getFullYear()}</div>
<div class="link-item-source" title="From: ${link.sourceTitle}">
<a href="${link.sourceLink}" target="_blank" style="color: inherit; text-decoration: none;">
anil.recoil.org