Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save matthewaveryusa/8257de0083abdecc612c9df0abdeb62f to your computer and use it in GitHub Desktop.

Select an option

Save matthewaveryusa/8257de0083abdecc612c9df0abdeb62f to your computer and use it in GitHub Desktop.
// ==UserScript==
// @name Block Social Media with Animation
// @namespace http://tampermonkey.net/
// @version 0.3
// @description Replace social media sites with a "Focus" message and an animated ball to remind you to stay off.
// @author me
// @match *://*.instagram.com/*
// @match *://*.facebook.com/*
// @match *://*.twitter.com/*
// @match *://*.tiktok.com/*
// @match *://*.reddit.com/*
// @match *://*.bbc.co.uk/*
// @match *://*.bbc.com/*
// @match *://*.fidelity.com/*
// @match *://*.lci.fr/*
// @match *://finance.yahoo.com/*
// @match *://finance.google.com/*
// @match *://*.lemonde.fr/*
// @match *://news.ycombinator.com/*
// @match *://*.nytimes.com/*
// @match *://*.x.com/*
// @match *://*.bloomberg.com/*
// @match *://*.cnet.com/*
// @match *://*.typeracer.com/*
// @match *://*.youtube.com/*
// @match *://*.lci.fr/*
// @match *://*.axios.com/*
// @license MIT
// @icon none
// @grant none
// ==/UserScript==
(function () {
"use strict";
// Clear the page
document.body.textContent = "";
document.body.style.backgroundColor = "#ffffff";
document.body.style.display = "flex";
document.body.style.flexDirection = "column";
document.body.style.alignItems = "center";
document.body.style.justifyContent = "center";
document.body.style.height = "100vh";
document.body.style.margin = "0";
// Create focus text
var text = document.createElement("div");
text.innerText = "Focus";
text.style.fontSize = "100px";
text.style.textAlign = "center";
text.style.fontFamily = "Arial, sans-serif";
text.style.marginBottom = "50px";
document.body.appendChild(text);
// Create animated ball
var ball = document.createElement("div");
ball.style.width = "100px";
ball.style.height = "100px";
ball.style.borderRadius = "50%";
ball.style.backgroundColor = "black";
ball.style.animation = "pulse 3s infinite ease-in-out";
document.body.appendChild(ball);
// Inject animation styles
var style = document.createElement("style");
style.textContent = `
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
`;
document.head.appendChild(style);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment