gisttyping.js

gistfile1.txt

yes i do , and tbh its not the
nicest thing to look at

TL;DR:
Step 0 : Why you should not try to do this
	this is risky
	when you learn to do this, you may
	start thinking its fun and safe
	IT IS NOT! there are bad ppl and idiots 
	everywhere
Step 1: explanation.
	 I made this little tool to animate
	your code/message typing
	why? capcut has too many bugs, and apart from stealing 
	your data , they charge for more and more effects,
	i love coding so i slowly build my own 
	tools to create interesting visuals
	without the use of computer.
	(all on the android phone guys)
	
so, if you are interested in how this actually
works i invite you to my github gist at the end of 
the video.

if you are not interested in how it works
the how to is after warnings:
Step 0 : Why you should not to do this.
DISCLAIMER and WARNING: 
i would personally never trust
to copy and paste unknown code 
into browser when you dont know 
what it is doing

oh 
(i dont know whether it will work 
on iphones ,they may have turned javascript
in bookmarks off - because as i said 
some iphone users are so so dumb,
and paste anything they were sent)

you can find the original code here:

https://gist.github.com/Osmiogrzesznik/
21a394281b55ec72ebe3f4b594431040

when we have this out da way:
Step 1: explanation
i am basically screen recording an animation
run by a javascript bookmarklet
this code works in similar way
as your browser extensions would
for example adblocker etc.
it modifies the layout on the webpage
animating where the elements(textboxes etc.)
are positioned and what do they contain
it so animation clears out all textboxes
saving whatever was inside them in memory
then it adds this content letter by letter
and then repositions part of the webpage
to keep the last entered letter in the same
place(yeah some simple but still maths was needed)
to make this work on your device you
1: need to copy code in this file:

https://gist.githubusercontent.com/Osmiogrzesznik/21a394281b55ec72ebe3f4b594431040/raw/1b9a1b84509733d8ba2bbb85d7640d4249d68671/Gisttyperbookmarklet.txt

2: add a bookmark in your browser

3:select to edit this bookmark

4:and paste the code
into the address field 
5:then rename bookmark as something
easy to remember
like ooo or whatever
---

6. go to any gist (not normal github, it only works on gists)
7. click your browser address field
8. start typing your bookmark name: ooo
9. click your bookmark i the propositions
10. seems like nothing happens but code started
working and prepared everything
11. when you click on the webpage the animation will start
it is interactive so you can zoom in and out
12. just screen record! then you can slap it into
	capcut and do your edits.
 12. if you still here. click that follow button
 i constantly tinker with stuff, and your videos 
 will be so much more interesting if you start
 using some of my tools.
 

----

gisttyper.js

var rrec = 0;
window.onerror = (x) => alert(x)
say2 = x=>{ptt.value = ptt.value+JSON.stringify(x)}


function parentRec(el,rec=1){
	let p = el;
	for(let i = 0;i<rec;i++){
		p = p.parentElement;
		}
	return p;
	}
var ptt = dce(document.body,'textarea');
let ps = ptt.style;

say = x=>x //say2//console.log
//for gists only
table = document.body.querySelectorAll('table')[0]
table = parentRec(table,rrec);
tableParent = table.parentElement
tableParentBbx = tableParent.getBoundingClientRect();
tableBbx = table.getBoundingClientRect();

function dce(x, y) {
		let rrr = document.createElement(y);
		x.append(rrr);
		return rrr;
	}




function styl(styles,elem){
const css = styles.split(';').map(cur => cur.split(':'));

console.log(css);

const cssInObject = styles.split(';').map(cur => cur.split(':')).reduce((acc, val) => {
    let [key, value] = val;
    key = key.replace(/-./g, css => css.toUpperCase()[1])
    acc[key] = value;
    return acc;
}, {});


 for (var property in cssInObject)
    elem.style[property] = cssInObject[property];

}
var originalBboxes = [];
function textNodesUnder(el) {
    let ooo = walkNodeTree(el, {
        inspect: n => !['STYLE', 'SCRIPT'].includes(n.nodeName),
        collect(n){
			let boo = (n.nodeType === Node.TEXT_NODE)
			if (boo) originalTexts.push(n.nodeValue);
			if (boo) originalBboxes.push(getNodeBbox(n));
			//n.nodeValue = '';
			return boo;
			}
		});
		return ooo;
}

function getNodeBbox(n){
	range.selectNodeContents(n);
	var rects = range.getClientRects();
	if (rects.length > 0) {
		return rects[0];
	}
}

function walkNodeTree(root, options) {
    options = options || {};

    const inspect = options.inspect || (n => true),
          collect = options.collect || (n => true);
    const walker = document.createTreeWalker(
        root,
        NodeFilter.SHOW_ALL,
        {
            acceptNode: function(node) {
                if(!inspect(node)) { return NodeFilter.FILTER_REJECT; }
                if(!collect(node)) { return NodeFilter.FILTER_SKIP; }
                return NodeFilter.FILTER_ACCEPT;
            }
        }
    );

    const nodes = []; let n;
    while(n = walker.nextNode()) {
        options.callback && options.callback(n);
        nodes.push(n);
    }

    return nodes;
}

var originalTexts = [];
var intv = 0.1


 tableParent.style.border = '1px solid red';
let wwh = tableParent.style.height = 400//innerHeight;//400; tableParentBbx.height;
tableParent.style.overflow = 'scroll';


stringStyles = `position:relative;top:0;left:0;background-image: url("./assets/bgchb.jpg");background-repeat: repeat;transition-duration:${intv}s;transition-timing-function:linear;`
styl(stringStyles,table)
pstringStyles = `position:relative;top:0;left:0;background:black;`
styl(pstringStyles,tableParent)

table.style.width = tableBbx.width;
table.style.border = '1px solid green';

//let hhh = table.style.height = tableBbx.height;
//table.id = 'bbu'
//table.style.transformOrigin = '0% 0%';
//table.style.transform = 'scale(1.8)';
tds = document.body.querySelectorAll(".js-file-line")
tds = Array.from(tds)
ctd = tds[0]
var range = document.createRange();
alltns = tds.map(el=> textNodesUnder(el)).flat();
alltns.forEach(n=>{n.nodeValue = ''})
//say(originalBboxes)
//say(originalTexts.length)

tableParent.style.display = table.style.display = 'block';

var txtNodes = alltns
let el;
var ei = -1;
var curarr= [];
var dts = document.body.style

dts.transitionProperty = 'all';
dts.transitionDuration = '0.5s';
dts.opacity = '0';
setTimeout(x=>dts.opacity = '1',500)

var ptt = dce(table,'div')
var s = ptt.style;
s.innerText = '|';
//s.background = 'red'
s.width = '0px'
s.height = '10px'
s.display = 'block'
s.position = 'absolute'
s.top = 0;
s.left = 0;
s.border = '1px solid white';

zoomm = 1;
window.onclick=e=>{
	const kfs = [
  { opacity: 1 },
  { opacity: 0, offset:.8},
    { opacity: 1,offset:.9 },
];

const tmg = {
  duration: 500,
  iterations: 99990,
};


  ptt.animate(kfs, tmg);
	table.style.zoom = zoomm
	setTimeout(animStepWrap,intv*1002);
}

function animStepWrap(){


	//table.style.zoom = zoomm
	let waitf = animStep()
	
	setTimeout(animStepWrap,waitf*intv*1002);
}

function animStep(){
		//pel.style.border = '';
	if (!curarr.length) movetoNextNode();
	el.nodeValue = el.nodeValue + curarr.shift()
	
	
	
	//table.style.top = '';
	var rect = originalBboxes[ei];
	var modrect = getNodeBbox(el)
	if(!modrect) return 0;
	if(!rect) return 0;
	
		let rx = rect.left - tableBbx.left + modrect.width;
		let ry = rect.top - tableBbx.top;
		let sx = -rx + 200;//3 + innerWidth/2;
//rx - tableBbx.left
		let sy = -ry + 400/2;
		say({sx,sy})
		//table.style.top = sy;
		//table.style.left = sx;
		table.style.transform = `translateX(${sx}px) translateY(${sy}px)`;
		s.transform = `translateX(${rx}px) translateY(${ry}px)`;
		s.height = rect.height/1.5+'px';
    //do someth2ing with the positikion
    //let yy= 	s.top = rects[0].y+window.scrollY;
    //let xx=	s.left = rects[0].right;
    //setZoom4352,bbu,xx,yy);
    
//   let sx = xx-(innerWidth/2)
//let sy =	yy-(innerHeight/2)
  /*  
    tableParent.scrollTo({
top:sy,
right:sx,
    behavior: "smooth"
    })
    */
    //setZoom(2,bbu,xx,yy);	
    return 1;
	}

function movetoNextNode(){
	ei = ei+1 < txtNodes.length? ei+1:0;
	el =txtNodes[ei]
	el.nodeValue ='';
	curarr = originalTexts[ei].split('');
	//el.style.border = '1px solid red';
	
}

Gisttyperbookmarklet.txt

javascript:void%20function(){function%20a(a,b=1){let%20c=a;for(let%20d=0;d%3Cb;d++)c=c.parentElement;return%20c}function%20b(a,b){let%20c=document.createElement(b);return%20a.append(c),c}function%20c(a,b){const%20c=a.split(%22;%22).map(a=%3Ea.split(%22:%22));console.log(c);const%20d=a.split(%22;%22).map(a=%3Ea.split(%22:%22)).reduce((a,b)=%3E{let[c,d]=b;return%20c=c.replace(/-./g,a=%3Ea.toUpperCase()[1]),a[c]=d,a},{});for(var%20e%20in%20d)b.style[e]=d[e]}function%20d(a){let%20b=f(a,{inspect:a=%3E![%22STYLE%22,%22SCRIPT%22].includes(a.nodeName),collect(a){let%20b=a.nodeType===Node.TEXT_NODE;return%20b%26%26l.push(a.nodeValue),b%26%26k.push(e(a)),b}});return%20b}function%20e(a){o.selectNodeContents(a);var%20b=o.getClientRects();if(0%3Cb.length)return%20b[0]}function%20f(a,b){b=b||{};const%20c=b.inspect||(a=%3E!0),d=b.collect||(a=%3E!0),e=document.createTreeWalker(a,NodeFilter.SHOW_ALL,{acceptNode:function(a){return%20c(a)%3Fd(a)%3FNodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP:NodeFilter.FILTER_REJECT}}),f=[];for(let%20c;c=e.nextNode();)b.callback%26%26b.callback(c),f.push(c);return%20f}function%20g(){let%20a=h();setTimeout(g,1002*(a*m))}function%20h(){r.length||i(),q.nodeValue+=r.shift();var%20a=k[n],b=e(q);if(!b)return%200;if(!a)return%200;let%20c=a.left-tableBbx.left+b.width,d=a.top-tableBbx.top,f=-c+200,g=-d+200;return%20say({sx:f,sy:g}),table.style.transform=`translateX(${f}px)%20translateY(${g}px)`,u.transform=`translateX(${c}px)%20translateY(${d}px)`,u.height=a.height/1.5+%22px%22,1}function%20i(){n=n+1%3Cp.length%3Fn+1:0,q=p[n],q.nodeValue=%22%22,r=l[n].split(%22%22)}window.onerror=a=%3Ealert(a),say2=a=%3E{j.value+=JSON.stringify(a)};var%20j=b(document.body,%22textarea%22);j.style;say=a=%3Ea,table=document.body.querySelectorAll(%22table%22)[0],table=a(table,0),tableParent=table.parentElement,tableParentBbx=tableParent.getBoundingClientRect(),tableBbx=table.getBoundingClientRect();var%20k=[],l=[],m=.1;tableParent.style.border=%221px%20solid%20red%22;tableParent.style.height=400;tableParent.style.overflow=%22scroll%22,stringStyles=`position:relative;top:0;left:0;background-image:%20url(%22./assets/bgchb.jpg%22);background-repeat:%20repeat;transition-duration:${m}s;transition-timing-function:linear;`,c(stringStyles,table),pstringStyles=`position:relative;top:0;left:0;background:black;`,c(pstringStyles,tableParent),table.style.width=tableBbx.width,table.style.border=%221px%20solid%20green%22,tds=document.body.querySelectorAll(%22.js-file-line%22),tds=Array.from(tds),ctd=tds[0];var%20o=document.createRange();alltns=tds.map(a=%3Ed(a)).flat(),alltns.forEach(a=%3E{a.nodeValue=%22%22}),tableParent.style.display=table.style.display=%22block%22;var%20p=alltns;let%20q;var%20n=-1,r=[],t=document.body.style;t.transitionProperty=%22all%22,t.transitionDuration=%220.5s%22,t.opacity=%220%22,setTimeout(a=%3Et.opacity=%221%22,500);var%20j=b(table,%22div%22),u=j.style;u.innerText=%22|%22,u.width=%220px%22,u.height=%2210px%22,u.display=%22block%22,u.position=%22absolute%22,u.top=0,u.left=0,u.border=%221px%20solid%20white%22,zoomm=1,window.onclick=a=%3E{const%20b=[{opacity:1},{opacity:0,offset:.8},{opacity:1,offset:.9}],c={duration:500,iterations:99990};j.animate(b,c),table.style.zoom=zoomm,setTimeout(g,1002*m)}}();