{"id":31552310,"url":"https://github.com/bittricky/drip","last_synced_at":"2026-04-13T17:31:25.084Z","repository":{"id":310379195,"uuid":"1039305994","full_name":"bittricky/drip","owner":"bittricky","description":"An exercise in CSS Animation","archived":false,"fork":false,"pushed_at":"2025-09-27T18:07:40.000Z","size":111,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-08T08:49:12.627Z","etag":null,"topics":["animejs","css","html","javascript","liquid","musing","postcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bittricky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-16T23:30:08.000Z","updated_at":"2025-09-27T18:11:31.000Z","dependencies_parsed_at":"2025-09-27T19:21:31.792Z","dependency_job_id":"6fc3528f-3e77-48b6-9510-573b0bf2a8ca","html_url":"https://github.com/bittricky/drip","commit_stats":null,"previous_names":["bittricky/drip"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bittricky/drip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bittricky%2Fdrip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bittricky%2Fdrip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bittricky%2Fdrip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bittricky%2Fdrip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bittricky","download_url":"https://codeload.github.com/bittricky/drip/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bittricky%2Fdrip/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31762471,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animejs","css","html","javascript","liquid","musing","postcss"],"created_at":"2025-10-04T19:51:15.206Z","updated_at":"2026-04-13T17:31:25.078Z","avatar_url":"https://github.com/bittricky.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Drip\n\n\u003e *\"You are not a drop in the ocean; you are the entire ocean in a drop.\"*\n\u003e \n\u003e **— Rumi**, *13th Century Persian Poet*\n\nAn exercise in recreating this [Drip Drop Animation](https://codepen.io/abehjat/pen/oXMENv).\n\n## Technical Overview\n\nHere's how some of the CSS animation techniques used to recreate the original function:\n\n### Keyframes (`@keyframes`)\n\n[Keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) define the stages of an animation sequence. Think of them as snapshots of what your element should look like at different points in time.\n\n```css\n@keyframes drip {\n  to {\n    top: 190px;\n  }\n}\n```\n\n**How it works:**\n- `@keyframes drip` creates an animation named \"drip\"\n- `to` (or `100%`) defines the end state\n- The browser automatically interpolates between the starting position and `top: 190px`\n- Apply it with `animation-name: drip`\n\n**Key Takeways:**\n- Use `from` and `to` for simple animations\n- Use percentages (`0%`, `50%`, `100%`) for complex multi-stage animations\n- The browser calculates all the in-between frames automatically\n\n### Radial Gradient (`radial-gradient()`)\n\n[Radial gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient) creates circular or elliptical color transitions, perfect for realistic lighting effects on 3D-looking objects.\n\n```css\nbackground: radial-gradient(\n  circle at 30% 30%,\n  #ffffff 20%,\n  #87cefa 70%,\n  #4fc3f7 100%\n);\n```\n\n**Breaking it down:**\n- `circle at 30% 30%` - Creates a circular gradient with its center at 30% from left, 30% from top\n- `#ffffff 20%` - White color starts at the center and goes to 20% of the radius\n- `#87cefa 70%` - Light blue from 20% to 70% of the radius\n- `#4fc3f7 100%` - Darker blue from 70% to the edge (100%)\n\n**Visual Effect:**\nThis creates a highlight effect that makes flat elements appear three-dimensional, like light hitting a water droplet.\n\n### Cubic Bezier (`cubic-bezier()`)\n\n[Cubic Bezier](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier) has a lot of math behind the scenes, but the basic idea is that it controls the acceleration and deceleration of animations, making them feel more natural and physics-based.\n\n```css\nanimation-timing-function: cubic-bezier(1, 0, 0.91, 0.19);\n```\n\n**Understand the parameters:**\n- Four numbers represent two control points: `(x1, y1, x2, y2)`\n- `(1, 0)` - First control point: starts fast\n- `(0.91, 0.19)` - Second control point: slows down gradually\n- This creates a \"gravity-like\" effect where the drop accelerates as it falls\n\n**Common patterns to follow:**\n- `ease-in`: slow start, fast end\n- `ease-out`: fast start, slow end  \n- `ease-in-out`: slow start and end, fast middle\n- Custom curves let you simulate real physics\n\n### Clip Path Polygon (`clip-path: polygon()`)\n\nCuts shapes out of elements by defining a [polygon](https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/polygon) with coordinate points.\n\n```css\nclip-path: polygon(50% 0%, 0% 90%, 100% 80%);\n```\n\n**How coordinates work:**\n- `50% 0%` - Point at horizontal center, top edge (tip of teardrop)\n- `0% 90%` - Point at left edge, 90% down from top\n- `100% 80%` - Point at right edge, 80% down from top\n- Browser connects these points to create the shape\n\n**Coordinate system:**\n- `0% 0%` = top-left corner\n- `100% 0%` = top-right corner  \n- `0% 100%` = bottom-left corner\n- `100% 100%` = bottom-right corner\n\n**Pro tip:** Use online polygon generators to visualize your shapes before coding!\n\n## Editing It All Together\n\nThe water droplet effect combines all these techniques:\n\n- **Keyframes** animate the falling motion\n- **Cubic bezier** makes the fall feel natural with gravity\n- **Clip path** shapes the teardrop tail\n\nEach technique serves a specific purpose in creating the illusion and creating the ripple effect of water.\n\n  ## Liquid Integration\n\nThis project uses [LiquidJS](https://liquidjs.com/) to render templates locally into a static `dist/index.html` and a lightweight dev toolchain for local iteration.\n\nCSS is processed via [PostCSS](https://postcss.org/) with `autoprefixer` and `postcss-preset-env` and output to `dist/style.css`.\n\n- Main page template: `templates/page.drip.liquid` wraps a complete HTML document and includes the section.\n- Section: `sections/drip.liquid` renders the droplet/ripple and defines CSS variables in a `:root` block from section settings.\n  - In the local build, `asset_url` and `stylesheet_tag` are emulated by the build script.\n- Section settings are loaded at build time from `scripts/data/sections/drip.json`.\n- Shopify-only `{% schema %}...{% endschema %}` blocks in the section are ignored during local rendering.\n\n### Available settings (configured via `scripts/data/sections/drip.json`)\n\n- `bg_color` — Background color\n- `droplet_light` — Droplet highlight (light)\n- `droplet_mid` — Droplet mid tone\n- `droplet_dark` — Droplet shadow (dark)\n- `ocean_color` — Ripple (ocean) color\n- `anim_duration` — Animation duration in seconds\n- `show_droplet` — Toggle droplet visibility\n- `show_ripple` — Toggle ripple visibility\n### Build and preview locally\n\n- Build once: `npm run build` (outputs `dist/index.html` and `dist/style.css`)\n- Dev server with auto-rebuild and live reload: `npm run dev` then open http://localhost:3000\n\n  ## Local Usage\n\nBuild and serve the Liquid templates locally using the provided Node pipeline (BrowserSync + nodemon + concurrently + PostCSS):\n\n1. Install dependencies:\n   - `npm install`\n2. Build once:\n   - `npm run build` (outputs `dist/index.html` and `dist/style.css`)\n3. Dev server (auto rebuild + live reload + serve):\n   - `npm run dev` and open http://localhost:3000\n   - The dev setup runs two watchers in parallel:\n     - `nodemon` watches `templates/`, `sections/`, and `scripts/build.js` and runs `npm run build:html` on changes (renders `dist/index.html`).\n     - `postcss-cli` watches `style.css` and writes `dist/style.css` on changes.\n   - `browser-sync` serves `dist/` with live reload.\n\n### Scripts overview\n\n- `npm run build` — Builds HTML (Liquid) and CSS (PostCSS) into `dist/`\n- `npm run build:html` — Builds only HTML into `dist/index.html`\n- `npm run css` — Processes CSS once via PostCSS into `dist/style.css`\n- `npm run watch` — Watches templates/sections/build.js and rebuilds HTML only\n- `npm run watch:css` — Watches `style.css` and rebuilds CSS only\n- `npm run dev` — Runs an initial build, then `watch`, `watch:css`, and `serve` in parallel\n\n### PostCSS\n\n- Config: `postcss.config.cjs` with `postcss-preset-env` (stage 1, includes nesting) and `autoprefixer`\n- CLI: `postcss style.css -o dist/style.css` (run via `npm run css`, invoked by `npm run build`)\n- Targets: controlled by `browserslist` in `package.json`\n\n### Customize appearance\n\nEdit the local section settings file at `scripts/data/sections/drip.json`:\n\n```json\n{\n  \"bg_color\": \"#ffffff\",\n  \"droplet_light\": \"#ffffff\",\n  \"droplet_mid\": \"#6b6b6b\",\n  \"droplet_dark\": \"#2c2c2c\",\n  \"ocean_color\": \"#2c2c2c\",\n  \"anim_duration\": 2,\n  \"show_droplet\": true,\n  \"show_ripple\": true\n}\n```\n\nThese map to CSS variables in the rendered HTML and are consumed by `style.css`.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbittricky%2Fdrip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbittricky%2Fdrip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbittricky%2Fdrip/lists"}