{"id":18,"date":"2026-08-06T09:34:20","date_gmt":"2026-08-06T12:34:20","guid":{"rendered":"https:\/\/freeanimationpower.org\/blog\/?p=18"},"modified":"2026-08-07T18:30:25","modified_gmt":"2026-08-07T21:30:25","slug":"anatomia_autocontenida-2","status":"publish","type":"post","link":"https:\/\/freeanimationpower.org\/blog\/anatomia_autocontenida-2\/","title":{"rendered":"Anatomia de un Universo Autocontenido: Por Que Cada Herramienta de Free animation power es un Archivo Unico"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-326 size-full\" src=\"https:\/\/freeanimationpower.org\/blog\/wp-content\/uploads\/2026\/08\/logo-free-animation-power.png\" alt=\"\" width=\"1024\" height=\"1024\" srcset=\"https:\/\/freeanimationpower.org\/blog\/wp-content\/uploads\/2026\/08\/logo-free-animation-power.png 1024w, https:\/\/freeanimationpower.org\/blog\/wp-content\/uploads\/2026\/08\/logo-free-animation-power-300x300.png 300w, https:\/\/freeanimationpower.org\/blog\/wp-content\/uploads\/2026\/08\/logo-free-animation-power-150x150.png 150w, https:\/\/freeanimationpower.org\/blog\/wp-content\/uploads\/2026\/08\/logo-free-animation-power-768x768.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Cuando abres cualquier herramienta de Free Animation Power no encuentras <code>node_modules<\/code> de medio gigabyte ni <code>webpack.config.js<\/code> ni <code>import { Button } from '.\/components\/Button'<\/code>. Encuentras un solo archivo PHP. Mobile: 2,488 lineas. Desktop Web: 2,867. Glitch: 2,102. Cada archivo es una herramienta completa. Esto no es un accidente. Es una declaracion de principios.<\/p>\n<h2>El archivo unico como atomo creativo<\/h2>\n<p>En fisica, un atomo es la unidad mas pequena de un elemento que conserva sus propiedades. No puedes dividirlo sin destruirlo. En FAP cada herramienta sigue esa logica: HTML, CSS, JavaScript y PHP conviven en un mismo archivo porque esa convivencia elimina la friccion mas peligrosa del desarrollo web \u2014 la distancia entre intencion y resultado.<\/p>\n<p>Cuando tienes 47 archivos en 12 carpetas, modificar el color de un boton puede implicar tres capas distintas. En FAP, modificas el color del boton donde defines su comportamiento y su contenido. No hay estados desincronizados. No hay imports rotos.<\/p>\n<p>La implicacion radical: independencia temporal. Si manana desaparece npm, FAP sigue funcionando. Si React cambia su API, FAP ni se entera. Si los CDN caen, solo hay que cambiar tres lineas. Todo lo demas es vanilla que corre en cualquier navegador con PHP 8.3+. No es minimalismo estetico: es resistencia contra la obsolescencia programada.<\/p>\n<h2>El proxy PHP como traduccion universal<\/h2>\n<p>En el corazon del Hub viven <code>api\/chat.php<\/code> e <code>api\/img.php<\/code>. Son proxies. Reciben peticiones del frontend y las reenvian. Llamarlos &#8220;hacks&#8221; es no entender su arquitectura.<\/p>\n<p><code>chat.php<\/code> es un transformador de protocolos. Recibe un body JSON con headers <code>x-target-url<\/code> y <code>x-api-key<\/code>, configura cURL con timeout de 120 segundos, reenvia la peticion y retorna el status code original. No necesita saber si al otro lado hay OpenAI, Gemini, DeepSeek, Mistral o Groq. Convierte la jaula del navegador \u2014 same-origin policy, CORS \u2014 en una autopista hacia cualquier API.<\/p>\n<pre><code>php\r\n$ch = curl_init($targetUrl);\r\ncurl_setopt_array($ch, [\r\n    CURLOPT_POST =&gt; true,\r\n    CURLOPT_POSTFIELDS =&gt; $rawBody,\r\n    CURLOPT_HTTPHEADER =&gt; $headers,\r\n    CURLOPT_TIMEOUT =&gt; 120,\r\n    CURLOPT_RETURNTRANSFER =&gt; true\r\n]);<\/code><\/pre>\n<p><code>img.php<\/code> va mas lejos: interpreta. Detecta si la respuesta viene de DALL-E (<code>data[0].url<\/code>), de Gemini (<code>predictions[0].bytesBase64Encoded<\/code>), de HuggingFace (<code>url\/image\/output<\/code>) o de Pollinations. Normaliza y entrega siempre una imagen renderizable. Es una maquina de Turing para APIs de generacion visual: dado cualquier input, produce el output correcto sin que el frontend sepa de donde vino.<\/p>\n<h2>La sesion PHP como contrato social<\/h2>\n<p>Todo el ecosistema esta protegido por 89 lineas de PHP. Sin OAuth. Sin JWT. Sin cookies de terceros. Solo <code>$_SESSION['email']<\/code>, verificado en la primera linea:<\/p>\n<pre><code>php\r\nif (!isset($_SESSION['email'])) {\r\n    header('Location: login.php?redirect=' . urlencode($_SERVER['REQUEST_URI']));\r\n    exit;\r\n}<\/code><\/pre>\n<p>La sesion dura 24 horas con cache limiter en <code>nocache<\/code>. El email gate usa <code>INSERT IGNORE<\/code>: si el correo existe, inicia sesion; si no, lo registra. Sin contrasenas. Sin verificaciones SMS. Sin 2FA.<\/p>\n<p>Esto no es autenticacion tradicional. Es un pacto de confianza en 89 lineas. FAP asume que quien pone un email real quiere usar herramientas reales. En un mundo donde cada startup te pide OAuth, telefono y DNI para probar un generador de paletas, FAP te pide un email y te abre todo por 24 horas.<\/p>\n<h2>CSS sin frameworks: el diseno como lenguaje nativo<\/h2>\n<p>El design system cabe en 1,255 lineas de CSS puro. Sin Tailwind, sin Bootstrap, sin utilidades generadas. Cada propiedad existe porque Eduardo Fierro Duque \u2014 desde Santiago de Chile \u2014 decidio que debia estar ahi. <code>#ffdc00<\/code> no es un token JSON: es la identidad visual del ecosistema.<\/p>\n<p>Las animaciones son vanilla. GSAP no: SplitText, Stagger, Magnetic, Ripple y ScrollTrigger recreados con <code>@keyframes<\/code>, <code>IntersectionObserver<\/code> y <code>pointer events<\/code>. <code>--color-primary: #ffdc00<\/code> no es una variable: es la declaracion de que el diseno se escribe en el lenguaje del navegador, no en el de un framework.<\/p>\n<h2>La paradoja de la dependencia cero<\/h2>\n<p>En todo FAP hay tres dependencias externas: gif.js 0.2.0, p5.js 1.11.1 y jsPDF 2.5.1. Tres, desde CDN. No hay React, Vue, jQuery, GSAP, Axios, Lodash, Webpack, Babel ni TypeScript.<\/p>\n<p>No es ludismo. Es matematicas a largo plazo. Cada dependencia que anades es una hipoteca: el mantenedor abandona, introduce breaking changes, aparece una vulnerabilidad o dejas de actualizar y nada compila. El vanilla que funciona hoy funcionara en 10 anos. Tu proyecto en React 18 con 47 dependencias&#8230; suerte.<\/p>\n<p>Cada linea que escribes es una linea que no migraras, actualizaras ni lamentaras. Cada funcionalidad en vanilla sobrevive a cualquier cambio de paradigma. Cada herramienta autocontenida de FAP es un universo cerrado fuera del tiempo tecnologico.<\/p>\n<hr \/>\n<p>Free Animation Power no depende de nada excepto un navegador y un servidor con PHP 8.3+. En un mundo donde cada &#8220;hola mundo&#8221; requiere 200 MB de <code>node_modules<\/code>, elegimos el camino inverso: menos dependencias, mas permanencia. Menos abstracciones, mas control. Menos archivos, mas densidad. Eso no es solo ingenieria. Es una apuesta por la permanencia. Es la conviccion de que el codigo que merece existir es el que puede sostenerse solo.<\/p>\n<hr \/>\n<p><strong>Hashtags:<\/strong> #archivo\u00danico #singleFile #herramientaAutocontenida #selfContainedTool #independenciaTemporal #temporalIndependence #PHPinline #HTMLinline #CSSinline #JavaScriptinline #sinDependencias #zeroDependencies #npmIndependence #resistenciaTecnol\u00f3gica #obsolescenciaProgramada #plannedObsolescence #proxyHTTP #protocolTranslation #m\u00e1quinaDeTuring #TuringMachine #sesionesPHP #PHPsessions #autenticaci\u00f3nSinContrase\u00f1a #passwordlessAuth #pactoDeConfianza #trustBasedDesign #CSS1255Lineas #designSystem #SplitTextVanilla #StaggerVanilla #MagneticVanilla #RippleVanilla #ScrollTriggerVanilla #keyframes #IntersectionObserver #gifJS #p5JS #jsPDF #\u00fanicasDependenciasCDN #only3CDNdeps #hipotecaT\u00e9cnica #technicalDebt #permanencia #permanence #c\u00f3digoQuePerdura #selfStandingCode #autonom\u00edaDelC\u00f3digo #codeAutonomy #menosEsM\u00e1s #lessIsMore #minimalWeb #filosof\u00edaDeDesarrollo #softwarePhilosophy #10A\u00f1osDeVigencia #PHP83 #longTermCode #freeanimationpower #eduardofierroduque #fierroduque.com<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Cuando abres cualquier herramienta de Free Animation Power no encuentras node_modules de medio gigabyte ni webpack.config.js ni import { Button } from &#8216;.\/components\/Button&#8217;. Encuentras [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-18","post","type-post","status-publish","format-standard","hentry","category-fap-web-hub"],"_links":{"self":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":8,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":333,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/18\/revisions\/333"}],"wp:attachment":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}