Skip to content

Instantly share code, notes, and snippets.

import cubicBezier from 'bezier-easing'
import { map as mapRange, round } from '@/util/math'
export function easedGradient({ direction, rgb, steps, bezier }) {
let ease = cubicBezier(...bezier)
let vals = Array(steps)
.fill()
.map((_, i) => {
const percent = round(mapRange(i, 0, steps - 1, 0, 1))
const alpha = 1 - ease(percent)
import { on, add, toggle } from '@/util/dom'
export function toggleVisibilityOnKey(selector, k) {
let el = document.querySelector(selector)
el.style.zIndex = '99999'
add(el, 'dn')
on(window, 'keyup', ({ key }) => {
key === k && toggle(el, 'dn')
})
}
export function poll(delay, cb, first = true) {
let lastCb = Promise.resolve()
let timeoutId = null
let off = false
if (first) {
handleCallback()
} else {
done()
}
export function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
export function hexToRGBA(hex, alpha) {
let c
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c = hex.substring(1).split('')
if (c.length == 3) {
c = [c[0], c[0], c[1], c[1], c[2], c[2]]
}
c = '0x' + c.join('')
return (
'rgba(' +
import { DetectUA } from 'detect-ua'
export default function sniffer() {
const ua = navigator.userAgent.toLowerCase()
const {
browser,
isMobile,
isTablet,
isDesktop,
isMacOS,
import { clamp } from '@/util/math'
import { on } from '@/util/dom'
export function rafScroll(cb) {
let tick = false
let lastScrollY = 0
const off = on(window, 'scroll', raf)
function raf(e) {
const Stats = require('stats.js')
module.exports = function() {
const stats = new Stats()
stats.domElement.style.cssText =
'position:fixed;left:0;bottom:0px;z-index:10000'
stats.domElement.id = 'stats'
if (!document.getElementById('stats')) {
/**
* Checks if provided value is an Array
*
* @param {*} value The value to test
* @return {Boolean} Truthy when value is an Array
*/
export function isArray(value) {
return Array.isArray(value)
}
@mikehwagz
mikehwagz / smooth.js
Created March 23, 2020 16:25
minimal picoapp smooth scroll implementation using native scrollbar
import { component } from 'picoapp'
import { add } from '@/util/dom'
import { round, lerp } from '@/util/math'
export default component((node, ctx) => {
let sh = null
let ty = 0
let cy = 0
let ly = null
let ease = 0.115