Baptiste Briel baptistebriel

## cli.js
/**
 * General-purpose NodeJS CLI/API wrapping the Stable-Diffusion python scripts.
 *
 * Note that this uses an older fork of stable-diffusion
 * with the 'txt2img.py' script, and that script was modified to
 * support the --outfile command.
 */

var { spawn, exec } = require("child_process");
var path = require("path");

## GsapTicker.jsx
import React, { useEffect } from 'react'
import gsap from 'gsap'
import { useFrame } from '@react-three/fiber'

// sync gsap raf to r3f raf
gsap.ticker.remove(gsap.updateRoot)

export const GsapTicker = () => {
  const pg = React.useRef(0)
  gsap.ticker.remove(gsap.updateRoot)

## index.html
<!doctype html>
<div id="sketch"></div>

<style>
body {
  margin: 0;
  overflow: hidden;
  background: #383838;
}
#sketch {

## about.md

      
              2 files
            
          
              0 forks
            
          
                0 comments
              
            
              8 stars
            
          
                mattdesl
                / about.md
            
            
              Last active
              February 27, 2018 04:46
            
              
                Texel + Saving Canvas PNG
              
          
    Saving GIF/MP4 Frames with Texel


The above GIF was rendered with Canvas2D and JavaScript. I used texel, a tool I am developing but have not yet released.
If you want to try this very experimental tool, install the latest working version like so:
npm install texel@1.0.15 --global

  
## raf-boilerplate.js
"use strict";


// animation utils
// ===============

const trackTime = id => {
  const [entry] = performance.getEntriesByName(id);
  if (!entry) {
    performance.mark(id);

## WebGL-WebGPU-frameworks-libraries.md

      
              1 file
            
          
              206 forks
            
          
                86 comments
              
            
              1535 stars
            
          
                dmnsgn
                / WebGL-WebGPU-frameworks-libraries.md
            
            
              Last active
              December 7, 2025 06:57
            
              
                A collection of WebGL and WebGPU frameworks and libraries
              
          
A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️


Name
Stars
Last Commit
Description


three.js
![GitHub


## Trump Fun
fire();

setInterval(fire, 300);
setInterval(unfire, 500);


function fire() {
  $('#can').trigger(TRUMP.main.events[0]);
}

## what-forces-layout.md

      
              1 file
            
          
              856 forks
            
          
                183 comments
              
            
              8471 stars
            
          
                paulirish
                / what-forces-layout.md
            
            
              Last active
              December 5, 2025 10:45
            
              
                What forces layout/reflow. The comprehensive list.
              
          
    What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
Element APIs

Getting box metrics


elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent


## bling.js
/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

## ffmpeg-compress-mp4
$ ffmpeg -i input.mp4 -vcodec h264 -acodec mp2 output.mp4
	/**
	* General-purpose NodeJS CLI/API wrapping the Stable-Diffusion python scripts.
	*
	* Note that this uses an older fork of stable-diffusion
	* with the 'txt2img.py' script, and that script was modified to
	* support the --outfile command.
	*/

	var { spawn, exec } = require("child_process");
	var path = require("path");
	import React, { useEffect } from 'react'
	import gsap from 'gsap'
	import { useFrame } from '@react-three/fiber'

	// sync gsap raf to r3f raf
	gsap.ticker.remove(gsap.updateRoot)

	export const GsapTicker = () => {
	const pg = React.useRef(0)
	gsap.ticker.remove(gsap.updateRoot)
	<!doctype html>
	<div id="sketch"></div>

	<style>
	body {
	margin: 0;
	overflow: hidden;
	background: #383838;
	}
	#sketch {
	"use strict";


	// animation utils
	// ===============

	const trackTime = id => {
	const [entry] = performance.getEntriesByName(id);
	if (!entry) {
	performance.mark(id);
	fire();

	setInterval(fire, 300);
	setInterval(unfire, 500);


	function fire() {
	$('#can').trigger(TRUMP.main.events[0]);
	}
	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };